Bootstrap, WordPress & NavWalker - Top Level Nav Links not working

Question

I realize this issue has been addressed in other postings, however, I am having trouble with the top nav links not working on this site.

This is a WordPress site built on BootStrap 3 and using NavWalker to integrate the WordPress navigation into the Bootstrap structure. 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 -->

This inherently lacks the hover feature that is nice to have on drop down menus. I have addressed this with the following solution from wpeden:

( 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 does a very nice job of gracefully displaying the drop down navigation, but there are no active links on parent menu items.

I have confirmed that the parent's actually have active links by moving them out of the navigation hierarchy with no children where they display links correctly, so there is something that is missing that I can't identify and would appreciate a keen eye or two to help spot it.

What do you mean by active links? I see that the menus are directly loaded with href="#" — Spokey
Hi Spokey, that's the problem. Something is stripping the link out and I am left with # for the links. As noted above, if I move the navigation element to position with no children, like Contact, the links appear correctly. But as soon as it has children the link is removed. — forrest

Spokey Spokey · Accepted Answer · 2014-10-28T15:30:33

NavWalker seems to be designed like that. You need to edit the source code in wp_bootstrap_navwalker.php at line #85.

Make the parent keep the 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 : '';
}

Bootstrap, WordPress & NavWalker - Top Level Nav Links not working

1 Answers