Bootstrap, WordPress & NavWalker - Nav top level links not working
I understand that this question has been addressed in other posts, however I am having issues with top server links not working on this site .
This is a WordPress site built on BootStrap 3 and uses NavWalker to integrate WordPress navigation into the Bootstrap framework. Here is the navigation code:
<div class="navbar navbar-default col-md-9" role="navigation">
<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>
</div>
<?php
wp_nav_menu( array(
'menu' => 'Primary',
'theme_location' => 'Primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse col-md-9',
'container_id' => 'none',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!-- /.container -->
</div><!-- /.navbar -->
As a consequence, the hover function is missing, which is good for dropdown menus. I approached this with the following wpeden solution :
( function( $ ) {
jQuery(function($) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function(){
location.href = this.href;
});
});
} )( jQuery );
This is a very nice job displaying the dropdown navigation gracefully, but there are no active elements in the parent elements.
I have verified that the parent does indeed have active links, pushing them out of the childless navigation hierarchy where they render links correctly, so there is something missing that I cannot identify and appreciate a sharp eye or two to help identify it ...
source to share
NavWalker seems to be designed like this. You need to edit the source code in wp_bootstrap_navwalker.php on line # 85 .
Make parent element href
even if it has children
if ( $args->has_children && $depth === 0 ) {
// $atts['href'] = '#'; // old line
$atts['href'] = ! empty( $item->url ) ? $item->url : ''; // new line
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
$atts['aria-haspopup'] = 'true';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
source to share