We Keep Coding

navbar dropdown and collapse not working[wordpress + bootstrap]

I am using bootstrap nav walker for my WordPress website but the dropdown is not showing up or collapse dont working
//bootstrap wp navbar code
<nav class="navbar navbar-expand-md navbar-light bg-light">
<?php bloginfo('name'); ?>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ml-auto">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 3,
'container' => 'div',
'container_id' => 'navbarNavDropdown',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker())
);
?>
</div>
</div>
</nav>
//Functions php file
<?php
// Register Nav Walker Class_alias
require_once('wp-bootstrap-navwalker.php');
//Theme support
function wpb_theme_setup() {
//nav menu
register_nav_menus(array(
'primary' => __('Primary Menu')
));
}
add_action('after_setup_theme', 'wpb_theme_setup');

first: go to class-wp-bootstrap-navwalker.php file
looking for $atts['data-toggle'] ="dropdown";
replace it by $atts['data-bs-toggle'] ="dropdown";

The problem was because i try to load bootstrap css from footer.php
i try to include in function.php file with this code
function abc_load_my_scripts() {
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'));
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'));
wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'abc_load_my_scripts', 999);

Glidejs is not loading on mobile

I'm trying to add glidejs to a wordpress site, it's working perfectly on desktop, but on mobile, it's not loading, seems that the JS files aren't being executed. I don't see a single error in the console. This the codepen. On mobile I see 3 pictures on top of each other.
the template
<section id="Glide" class="glide banner_desktop">
<!-- ARROWS -->
<div class="glide__arrows">
<button class="glide__arrow prev" data-glide-dir="<"><i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
</button>
<button class="glide__arrow next" data-glide-dir=">"><i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</button>
</div>
<div class="glide__wrapper">
<ul class="glide__track">
<?php if ( have_rows( 'banner_desktop', 'option' ) ) : ?>
<?php while ( have_rows( 'banner_desktop', 'option' ) ) : the_row(); ?>
<?php if ( get_sub_field( 'image' ) ) { ?>
<li class="glide__slide">
<a href="<?php the_sub_field( 'link' ); ?>">
<img src="<?php the_sub_field( 'image' );?>" />
</a>
</li>
<?php
}
endwhile; endif;
?>
</ul>
</div>
<!-- CAROUSEL DOTS -->
<div class="glide__bullets"></div>
</section>
functions.php
wp_enqueue_script( 'glide', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide.js', array('jQuery') );
wp_enqueue_script( 'glide_Js', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide_JS.js', array('jQuery') );
wp_enqueue_style( 'glide_css', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide.css');
wp_enqueue_style( 'glide_theme', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide_theme.css');
glide.js is
var glide = function () {
// glide.min.js code which is on codepen
// https://cdn.jsdelivr.net/npm/glidejs#2/dist/glide.min.js
}();

1- Create a glide folder at the root of your theme, same level as style.css
2- In this folder put glide.min.js, glide.core.css, glide.theme.css and Create my.glide.js
3- In functions.php of your theme add :
/**
* Enqueue Glide.js scripts and styles.
*/
function glide_js_scripts_styles() {
wp_enqueue_style( 'glide-core', get_theme_file_uri( '/glide/glide.core.css' ), array(), filemtime( get_theme_file_path( '/glide/glide.core.css' ) ) );
wp_enqueue_style( 'glide-theme', get_theme_file_uri( '/glide/glide.theme.css' ), array(), filemtime( get_theme_file_path( '/glide/glide.theme.css' ) ) );
wp_enqueue_script( 'glide', get_theme_file_uri( '/glide/glide.min.js' ), array(), filemtime( get_theme_file_path( '/glide/glide.min.js' ) ), true );
wp_enqueue_script( 'my-glide', get_theme_file_uri( '/glide/my.glide.js' ), array('jquery'), filemtime( get_theme_file_path( '/glide/my.glide.js' ) ), true );
}
add_action( 'wp_enqueue_scripts', 'glide_js_scripts_styles' );
Since Glide has no dependency, you leave the dependency array() empty for glide.min.js, but you add it to you personal one my.glide.js
4- In your my.glide.js, fire the script :
(function ($) {
new Glide('.glide', {
type: 'carousel',
startAt: 0,
perView: 3
});
// OR
$('.glide').glide({
type: 'carousel',
startAt: 0,
perView: 3
});
})(jQuery);
Please, note that you should use a child theme for your customization or all your changes will be removed in the next update of the theme that you are using.
So use a child theme and make the same steps in the child theme.

Meterializecss- Wordpress Dropdown Navigation

I show the WordPress menu items but do not show the dropdown . How do I show the dropdown menu ?
functions.php
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'TNCTR-OnePage' ),) );
Header.php
<div class="navbar-fixed">
<nav class="navbar-tp">
<div class="nav-wrapper">
<div class="container">
<?php
wp_nav_menu(array(
'menu' => 'primary',
'menu_class' => 'right hide-on-med-and-down'
));
?>
<?php
wp_nav_menu(array(
'menu' => 'primary',
'menu_class' => 'side-nav',
'menu_id' => 'mobilemenu',
'items_wrap' => '<ul id="slide-out" class="%2$s">%3$s</ul>'
));
?>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
HTML ver.
http://pasted.co/b2fc8b68

Doesn't look like you assigned a theme location? https://codex.wordpress.org/Function_Reference/wp_nav_menu

Why did javascript stop working when I implemented ZF2 ACL?

I am using Bootstrap with my Zend Framework 2 app. The formatting was looking good until I implemented ACL controls. Now the only time the buttons are formatted is when the user's role is guest. Any ideas on what went wrong?
#Zend Framework2 folks: Is there any need to include the css and js files in the ACL list?
The ACL control from config/autoload/acl.global.php looks like:
return array(
'acl' => array(
'roles' => array(
'guest' => null,
'member' => 'guest',
'mentor' => 'member',
'board' => 'mentor',
'admin' => 'board',
),
'resources' => array(
'allow' => array(
'Register\Controller\Profile' => array(
'index' => 'guest',
'confirm' => 'member',
'process' => 'guest',
'edit' => 'member',
'saveEdit' => 'member',
'family' => 'member',
'delete' => 'member',
),
'Register\Controller\Index' => array(
'index' => 'guest',
'profile' => 'guest',
'login' => 'guest',
),
...and so forth for each controller and action (no other resources are included)
Here is the page layout template, default-layout.phtml showing the only javascript I use or pull in:
<?php echo $this->doctype(); ?>
<html lang="en">
<head>
<meta charset="utf-8">
<?php echo $this->headTitle('TJLA Registration')->setSeparator(' - ')->setAutoEscape(false) ?>
<?php echo $this->headMeta()
->appendName('viewport', 'width=device-width, initial-scale=1.0')
->appendHttpEquiv('X-UA-Compatible', 'IE=edge')
?>
<!-- Styles -->
<?php echo $this->headLink(array('rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/img/tjla-tree.png'))
->prependStylesheet($this->basePath() . '/css/style.css')
->prependStylesheet($this->basePath() . '/css/bootstrap-theme.min.css')
->prependStylesheet($this->basePath() . '/css/bootstrap.min.css');
?>
</head>
<body>
<div class="masthead">
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container navbar-container">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse">
<?php echo $this->navigation('navigation')->menu()->setUlClass('nav navbar-nav'); ?>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<?php echo $this->content; ?>
<hr>
<footer>
<p>© <?php echo date('Y') ?> by Thomas Jefferson Leadership Academy. All rights reserved.</p>
</footer>
</div> <!-- /container -->
<!-- Scripts -->
<?php echo $this->inlineScript()
->appendFile($this->basePath() . '/js/jquery.min.js')
->appendFile($this->basePath() . '/js/bootstrap.min.js')
->appendFile($this->basePath() . '/js/respond.min.js', 'text/javascript', array('conditional' => 'lt IE 9',))
->appendFile($this->basePath() . '/js/html5shiv.js', 'text/javascript', array('conditional' => 'lt IE 9',));
?>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

Please excuse me for wasting your time. I discovered the problem; the page was overwritten with a previous version and the proper class was missing from the anchors. (role="button" class="btn btn-xs btn-primary")

I want to apply an external js file that will autohide my navigation bar

I want to apply a js I found here on stackoverflow to my navigation bar. This is aimed to autohide it after a moment of inactivity. But I dont know how to include and apply the code to my navigation bar.
This is how my html goes
<div class="basic-wrapper">
<a class="btn responsive-menu pull-right" data-toggle="collapse" data-target=".navbar-collapse">
<i class='icon-menu-1'></i>
</a>
<a class="navbar-brand" href="<?php echo home_url(); ?>">
<?php
if( get_option('custom_logo') ){
echo '<img src="'. get_option('custom_logo') .'" alt="" data-src="'. get_option('custom_logo') .'" data-ret="'. get_option('custom_logo_retina') .'" class="retina" />';
} else {
echo bloginfo('title');
echo '<br /><small>';
echo bloginfo('description');
echo '</small>';
}
?>
</a>
</div>
<div class="collapse navbar-collapse pull-right">
<?php
if ( has_nav_menu( 'primary' ) ){
wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 3,
'container' => false,
'container_class' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'menu_id' => 'ebor-main-menu',
'walker' => new ebor_bootstrap_navwalker()
)
);
} else {
echo 'Set up a navigation menu now';
}
if( get_option("header_social_link_1") )
get_template_part('loop/loop','socialheader');
?>
</div>
</div><!--/.container-->
</div><!--/.nav-collapse -->
This is the code I found-
$("div").hide();
$("html").mousemove(function( event ) {
$("div").show();
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function(){
$("div").hide();
}, 1000);
}
function myStopFunction() {
if(typeof myVar != 'undefined'){
clearTimeout(myVar);
}
}

If you are asign how to include an external javascript file, you need to do the following:
<script src="//path/to/external/js/file.js"></script>
As for the actual JS code, i dont think that will give you what you are looking for, as it will hide ALL DIVs on the page.
You'd want to replace that with something like. $("div#IDofMenuContatiner")...