Top Level Drop Down Menu Link

[NickMcBurney]

I was wondering if anyone has found a fix to allow top level drop down menus link?

I have managed to add the correct url to the link by changing line 85 of wp_bootstrap_navwalker.php from
$atts['href'] = '#';
To
$atts['href'] = ! empty( $item->url ) ? $item->url : '';

and by adding this CSS:
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block !important;
}

This displays the submenu when hovering and links to top level link to the correct page but forsome reason when I click to view the toplevel page nothing happens?

Help much appreiated!
Thanks,
Nick

[jazzsequence]

@NickMcBurney It's because of the bootstrap dropdown-toggle class that's getting attached to the link. I'm looking at the same thing and trying to come up with a fix.

[jazzsequence]

This looks like it could be a workable solution: http://jsfiddle.net/R3JKz/15/ (source)

[NiviJah]

Just to let you guys know, the fix didn't work for me.
I ended up using this: https://github.com/CWSpear/bootstrap-hover-dropdown
Changed -> $atts['data-toggle'] = 'dropdown'; at line 86
to -> $atts['data-hover'] = 'dropdown';

[jazzsequence]

@NiviJah Yeah, I tried to make that fiddle work and gave up.

That's all you needed to change to get it working?

[Bradley-D]

This is the version I use that seems to work pretty well

CSS change to @media (min-width: 768px):

.dropdown:hover .dropdown-menu {
  display: block;
}

Change to navwalker

if ( $args->has_children && $depth === 0 ) {
  $atts['href']          = ! empty( $item->url ) ? $item->url : '';
  $atts['data-toggle']   = 'dropdown';
  $atts['class']         = 'dropdown-toggle';
  $atts['aria-haspopup']    = 'true';
  //$atts['data-toggle']   = 'dropdown'; <- gets added in jQuery file on < 768 window
} else {
  $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

Then in a jQuery file

jQuery(function($) {
  // Bootstrap menu magic
  $(window).resize(function() {
    if ($(window).width() < 768) {
      $(".dropdown-toggle").attr('data-toggle', 'dropdown');
    } else {
      $(".dropdown-toggle").removeAttr('data-toggle dropdown');
    }
  });
});

[jazzsequence]

👍 Thanks @Bradley-D!

[Bradley-D]

@jazzsequence you're welcome. hope it works the way you want.

[jaybuddy]

Thanks NiviJah. Worked great. Would be cool to maybe make this a setting for future releases as I would imagine it is requested frequently.

[PlanBrewski]

This has been proposed many times, but unfortunately this is not something that would be added to the class.

The reasons for this are two fold:

1. The class is intended to assist theme developers in implementation of standard Bootstrap 3.x menus with no additional features, JS or CSS.
2. This brakes Bootstraps mobile first mindset. Setting up the menu this way would cause broken and unexpected issues on tablets and some mobile devices. Mitigating this would require a lot of additional markup that would need to be hidden or altered with JavaScript in a responsive scenario.

Looking at it from a UX standpoint I often challenge other to rethink their menu structure. A menus should ultimately be the simplest form of navigation possible.

Here are my personal navigation rules:

1. If your menu item has a dropdown, there is no need for a parent page. This content is often redundant and just another roadblock on the way to relevant content. Do I need to click a services button to see your offer services? or should go directly to the relevant content? Yes, sometimes parent pages are useful for SEO landing but this does not mean they need to be included the main navigation.
2. If your dropdown links to content inside a parent page (not its own page) it has no place in the main navigation and should be moved to page specific navigation. Navigation the produces unexpected results is always bad for user experience.
3. Never dropdown on hover. Navigate with intention. There is nothing more annoying than trying to use a drop down menu and having it disappear because your mouse is in the wrong position, or accidentally clicking the parent. This also solves many issues on mobile. Clicking to dropdown allows mobile users to access the submenu items instead of being directed to a parent page. Mobile users move quickly and with intention, if they are forced to load additional pages of struggle to navigate they will bounce.
4. Always Remember to KISS. Keep it simple, stupid. Problems with websites are not the fault of web browsers or users. Problems with websites arise when we needlessly over complicate things. The less HTML, CSS & Javascript we can load, the less potential we create for user confusion, the better the web will be.

[nivadech]

thanks

[loorlab]

@Bradley-D @NickMcBurney @jazzsequence Hi, we use : $atts['href'] = ! empty( $item->url ) ? $item->url : ''; on wp_bootstrap_navwalker.php

And...

Our header responsive is :

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container ">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
                <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="navbar-brand" href="<?php echo get_site_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logos/logo.png" alt=""></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
                <?php
                    wp_nav_menu( array(
                        'menu'              => 'primary',
                        'theme_location'    => 'primary',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_class'   => 'collapse navbar-collapse',
                        'container_id'      => 'main-menu',
                        'menu_class'        => 'nav navbar-nav navbar-right',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>    
        </div><!-- /.container-fluid -->
    </nav> 

And Working !

Thanks for your solution !

[anildogra98]

@NickMcBurney Thanks for help

[joe-bb]

The link is attached, but you will have to remove the following code to make the link clickable (Bootstrap 4):
$atts['data-toggle'] = 'dropdown';
While still using the solution provided:

if ( $args->has_children && $depth === 0 ) {
				$atts['href']        = "#";
				$atts['data-toggle'] = 'dropdown';
				$atts['class']       = 'nav-link dropdown-toggle';
			}

To

if ( $args->has_children && $depth === 0 ) {
				$atts['href']        = ! empty( $item->url ) ? $item->url : '';
				$atts['class']       = 'nav-link dropdown-toggle';
			}

[anfont]

@Bradley-D your solution is perfect, but the link it is still unactive, I've verified it by doing:

if ( $args->has_children && $depth === 0 ) {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
//$atts['data-toggle'] = 'dropdown';
$atts['data-toggle'] = ''; // without dropdown class the link will work
$atts['class'] = 'nav-link dropdown-toggle';
$atts['aria-haspopup'] = 'true';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

[owebudde]

Here is a basic way to make the parent clickable work on mobile with a little jQuery after you manipulate the navwalker (using MobileDetect.js):

• Edit: it was still a little buggy but here is a fully functional method:

if(md.mobile()) {
	jQuery('.navbar .dropdown > a').click(function(e){
        e.preventDefault();
    });
    jQuery('.dropdown').on("show.bs.dropdown", function(event){
    	jQuery(this).find('a').click(function(){
        	location.href = this.href;
    	    });
	});
}
jQuery(function($) {
    if($(window).width()>769){
        $('.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;
        });
    }
});

[TinyMeerkatRebel90]

@inksea Hi! Thanks for that it worked! I only had to change the md.mobile() to md.phone() because I did not want that for the tablets. Also, (it is obvious but it took some minutes to think it) we need to identify the md: var md = new MobileDetect(window.navigator.userAgent);

I have a question, though! I cannot make it work on the iPad (the simple not Pro). Every other resolution is fine but I cannot find why it does not work on the iPad; is there any CSS code that might help me?

[shaktikathpalia]

This worked best for me and it was the easiest.

$(".dropdown-toggle").click(function(){
    if ($(window).width() >= 992) {
      location.href = $(this).attr('href');
    }
  });

[trondhuso]

Just so it is written and documented. The non-clickable parent menu item is by intention:
https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/