I can't seem to make the collapse work on my menu using WP Bootstrap Navwalker.
Below is my code :
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'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())
);
?>
</nav>
</div>
</div>
And below is what I defined in my functions.php :
require_once('WP_Bootstrap_Navwalker.php');
function wpb_theme_setup(){
// Nav Menus
register_nav_menus(array(
'primary' => __( 'Primary Menu' )
));
}
And my bootstrap.min.js :
<script src="<?php bloginfo('template_url'); ?>/js/bootstrap.min.js"></script>
Can anybody point out where I got it wrong? Thank you so much in advance!
Best regards,
Peter
I was able to solve this issue when I changed WP_Bootstrap_Navwalker ()) and WP_Bootstrap_Navwalker.php to all lower case letters.
Related
I am using Visual Studio 2017 with the built in MVC template, I added to bootstrap.css to create a navbar that is along the left side of the screen on sm/md/lg and across the top on xs. The navbar looks like so
<div id="sidenav" class="col-xs-12 col-sm-3 col-lg-2 navbar navbar-default navbar-fixed-left nav-stacked">
<div class="col-xs-12 container">
<!--Header-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Menu", "Index", "Home", "Home", new { #class = "navbar-brand" })
</div>
<!--Content-->
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Elements</li>
</ul>
</div>
</div>
I added to bootstrap.js the following and made no other changes:
$('.navbar-nav li a').click(function (e) {
$('.navbar-nav li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
The problem seems to be with the e.preventDefault(), if I include it, the active list item will change, but navigation doesn't happen. If I remove it, the active item will clear, the clicked item will change color, navigation happens, but then the correct link will go back to normal and the original active link is active again.
Probably something small and stupid but what do I have wrong or what am I missing, thank you.
I have a simple VueJS App with a Navigation Bar from Bootstrap:
<template>
<header id="header">
<nav class="navbar mynavbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><router-link to="/home"><a>Home</a></router-link></li>
<li><router-link to="/about"><a>About Us</a></router-link></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header>
</template>
Now I want to ensure that when I change the route, the Bootstrap Menu gets closed. What is the best way to accomplish this?
Instead of adding event handlers to every router-link, you can simply watch the $route property for changes:
<script>
export default {
watch: {
'$route' () {
$('#navbar-collapse').collapse('hide');
}
}
}
</script>
Without Bootstrap and jQuery, can be easily achieved using class toggle and watch route changes.
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
#click="toggledNav = !toggledNav"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
Script:
export default {
data () {
return {
toggledNav: false
}
},
watch: {
'$route' () {
this.toggledNav = false
}
}
}
You could give this a try:
<template>
<header id="header">
<nav class="navbar mynavbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><router-link #click.native="closeMenu()" to="/home"><a>Home</a></router-link></li>
<li><router-link #click.native="closeMenu()" to="/about"><a>About Us</a></router-link></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header>
</template>
<script>
export default {
methods: {
closeMenu() {
$('#navbar-collapse').collapse('hide');
}
}
}
</script>
With vue3 and bootstrap5, adding this to the router-link element:
data-bs-toggle="collapse" data-bs-target=".navbar-collapse"
did not work for me: the menu would close without the link being followed.
So, I added this to router/index.js:
router.beforeEach(() => {
document.getElementById('navbarCollapse').classList.remove('show');
})
with navbarCollapse being the id of the div holding the menu/nav items.
It seemed to do the trick.
If necessary you can adjust the hamburger button state: its class list would need to contain "collapsed" and aria-expanded set to "false".
This gets corrected though when the user clicks the button again, so I didn't opt to write that code.
If you are using bootstrap-vue and vue-router.
<script>
export default {
watch: {
'$route' () {
const element = document.querySelector("#nav-collapse");
let isShown = element.classList.contains("show");
if(isShown){
this.$root.$emit('bv::toggle::collapse', 'nav-collapse')
}
}
}
}
</script>
<template>
<b-navbar toggleable="lg" type="" class="p-0">
<b-navbar-toggle target="nav-collapse" id="navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<div class="nav-wrapper w-100">
<ul class="app-navigation__list">
<router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
<a href="">
<span class="link-text">Home</span>
</a>
</router-link>
<router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
<a href="">
<span class="link-text">About</span>
</a>
</router-link>
<router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
<a href="">
<span class="link-text">Store</span>
</a>
</router-link>
</ul>
</div>
</b-collapse>
</b-navbar>
</template>
I know this is an old question but my answer might help someone.
do this in your router/index.js
const router = createRouter({}); //P.S I am using Vue3
then add this before each route entering like so.
router.beforeEach(() => {
$('.navbar-collapse').collapse('hide'); //Be sure to import jquery
});
Because this is such a simple task, I try to make it as simple as my simple website.
Vue.mixin((()=> {
let store = Vue.observable({
indexMenu: false,
})
return{
computed: {
menu: {
get() {
return store.indexMenu
},
set(val) {
store.indexMenu = val
}
}
},
watch: {
'$route' () {
this.menu = false
}
}
}})())
router.beforeEach((from,to,next) => {
$('.navbar-collapse').collapse('hide'); //Be sure to import jquery
next();
});
This works
I have a vertical navbar that becomes collapsible when viewed in mobile devices. I want my users to continue to see the navbar even after they scroll, and only have it close by clicking on an item or on the nav toggle.
I've tried the following (from a post on stack overflow :) ) :
$('.sidebar-navbar-collapse').on({
"show.bs.collapse": function() { this.closable = false;console.log('in show nav'); },
"click": function() { this.closable = true; console.log('in click to hide nav'); },
"hide.bs.collapse": function() { return this.closable;console.log('in hide nav, closable:', this.closable); }
});
But while I see the output for the shown & click, I don't see it for the hide event when it is closed by scrolling.
HTML:
<div class="col-md-4 col-sm-4 sidebar-nav">
<div class="navbar" role="navigation">
<h1 class='hidden-xs' style="border-bottom: 1px solid #ddd;">Topics</h1>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Topics</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" style="list-style:none; font-size: 16pt !important; font-family: תArial, sans-serif;" lang="HE">
<li>
Privacy
</li>
<li>
Report
</li>
</ul>
<div class="clear"></div>
</div>
</div>
Here is a js fiddle:
https://jsfiddle.net/bv773t0a/
Thank you!
Rightly pointed out by #Karan3112
You have something conflicting with Bootstrap Javascript within your main.js. Try:
jQuery(".collapse.navbar-collapse.in").removeClass("in");
I am currently hitting a strange roadblock with Boostrap's mobile nav bar where if I place the Bootstrap JS script below the jQuery JS script (where it should be), the mobile menu will open, but will not close. However, if I flip the order of the scripts, the mobile menu works flawlessly! I read about how this might be where I may have a duplicate JS somewhere, but I cannot find a duplicate.
Script order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://apis.google.com/js/api.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>
Header (where the navbar is):
<header>
<div class="heading container-fluid">
<div class="btn-group searchbar-top">
<input id="searchinput" type="search" placeholder="Search for a song" class="form-control">
<i class="glyphicon glyphicon-search search-button-desktop"></i>
</div>
<a class="heading-image" href=""><img id="my-heading" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo_header.png" alt="UNCVRD"></a>
<ul class="signup-login-buttons">
<?php if (is_user_logged_in()) { ?>
<li>
LOGOUT
</li>
<?php } else { ?>
<!-- <a class="login_button" id="show_login" href="">Login</a> -->
<li><a id="desktop-bar-signup" data-toggle="modal" data-target="#modalsignup" href="#">SIGN UP</a></li>
<li><a data-toggle="modal" data-target="#modal-login" href="#">LOG IN</a></li>
<?php } ?>
</ul>
</div>
<nav class="navbar">
<div class="btn-group searchbar-top">
<input id="searchinput" type="search" placeholder="Search for a song" class="form-control">
<span id="searchclear" class="icon ion-android-close"></span>
</div>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<i class="glyphicon glyphicon-search search-button"></i>
<a class="navbar-brand" href=""><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo_header.png" alt="UNCVRD"></a>
<a class="mobile-signup" data-toggle="modal" data-target="#modalsignup" href="#">Sign Up</a>
</div>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
'container_id' => 'myNavbar'
));
?>
</div>
</nav>
</header>
you dont need to include jquery libraray link in footer. because wordpress is already included in top of the page. you can view by view page source on browser.
for this
removing the jquery file fixes the menu issue but now none of my main.js scripts work. console says "$ not a function"
you can use
(function($){
or you can use jQuery instead of $
I am currently using a bootstrap collapsed navigation for when my site is viewed on a mobile. I want to hide my logo from the top of the page and put it inline with my toggle button to save some screen space. When I try to place my image into the navbar it doesn't seem to display, all that displays is my ALT text. Here is the code i'm currently using.
<div class="row">
<div class="col-md-12">
<nav id="menu1" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div id="logo" class="pull-left hidden-md hidden-lg">
<div class="img-responsive logo-small">
<img src="images/logo-xs.png" alt="small-logo"/>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<?php wp_nav_menu( array( 'theme_location' => 'main-menu',
'depth' => 2,
'container_class' => 'collapse navbar-collapse',
'menu_class' => 'nav nav-pills nav-justified',
'walker' => new wp_bootstrap_navwalker() )); ?>
</nav>
</div>
Try to find the network request for the image using Chrome Dev Tools for instance.
Chrome Dev Tools, network tab
It seems like you're missing a closing </div> tag. I suppose it should be just before the <button>
you are missing a closing "div" tag. Because between "nav" tag section open three "div" but close two "div" tag.