Bootstrap: How do I make Dropdown navigation Parent links an active link?

Question

I am running Bootstrap on a WP install and have an issue with the url being stripped from the parent drop down nav item.

Here is the code. In menu-item-72 you can see that the href for our-team is just a # instead of a proper link.

<ul id="menu-primary" class="nav navbar-nav">
 <li id="menu-item-69" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-69"><a title="Home" href="http://mostellar.opteradev.com/">Home</a></li>
 <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-70 active"><a title="About Us" href="http://mostellar.opteradev.com/us/">About Us</a></li>
 <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-72 dropdown"><a title="Our Team" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Our Team <span class="caret"></span></a>
  <ul role="menu" class=" dropdown-menu">
    <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a title="Katherine M. Conwell, CPA" href="http://mostellar.opteradev.com/katherine-m-conwell/">Katherine M. Conwell, CPA</a></li>
    <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a title="Ann S. Bowers, CPA" href="http://mostellar.opteradev.com/our-team/ann-s-bowers/">Ann S. Bowers, CPA</a></li>
    <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a title="John B. Mostellar, CPA" href="http://mostellar.opteradev.com/our-team/john-b-mostellar/">John B. Mostellar, CPA</a></li>
    <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a title="Lewis T. Shreve, CPA" href="http://mostellar.opteradev.com/our-team/lewis-t-shreve/">Lewis T. Shreve, CPA</a></li>
 </ul>
</li>
</ul>

What is missing from this to make it work? I have confirmed that the item is associated with an active entry.

Solution 1

By default bootstrap parent items on a dropdown are not clickable. Add this script to your page and now they will be:

<script>
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;
});

});
</script>

Credit for this solution goes to http://wpeden.com/tipsntuts/twitter-bootstrap-dropdown-on-hover-and-activating-click-event-on-parent-item/

Solution 2

For me it worked this way: I assume you make usage of the wp-bootstrap-navwalker

Open up the wp-bootstrap-navwalker.php with your editor and look up for line approx.

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
   $atts['href']        = '#';
   $atts['data-toggle'] = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

Change this piece of code to:

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
   //$atts['data-toggle']   = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

Note: $att['href'] is enabled now, the the $atts['data-toggle'] is disabled which makes the parent link clickable.

Now open up your style.css and add this piece of code to activate the hover function for your WordPress menu with dropdown and clickable parent.

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

Note: The behaviour of the menu will change slightly on small devices with small screens. No additional jQuery required.

Solution 3

You can set that by removing data-toggle="dropdown" and setting data-hover="dropdown".

Solution 4

To add on to Sohail Qureshi's solution, I modified the file a bit more, and here's a way that converts the parent link to an actual link:

in wp-bootstrap-navwalker.php, change this piece of code:

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
   $atts['href']        = '#';
   $atts['data-toggle'] = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

to:

    // If item has_children add atts to a.
    if ( $args->has_children && $depth === 0 ) {
        $atts['href']           = ( $item->url );
        $atts['data-toggle']    = 'dropdown';
        $atts['class']          = 'dropdown-toggle disabled';
        $atts['aria-haspopup']  = 'true';
    } else {
        $atts['href'] = ! empty( $item->url ) ? $item->url : '';
    }

and now the parent link is clickable and actually link to page!

Solution 5

May 2018 this solution worked for me.

Go to your class-wp-bootstrap-navwalker.php file -> comment line 185

// $atts['href']          = '#';

And paste this code.

$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['data-toggle']   = 'hover';

Enjoy.

View more solutions

Comments

[forrest]

That works good for delaying the response. So nice work in passing that along. What would account for the URL not being present and any ideas how that could be restored?

[gigelsmith]

@fmz Sorry but I misunderstood your initial question. I would need to know more. Can you provide a link to your problem? What Bootstrap WP theme are you using?

[forrest]

It is a custom theme. You can view it here: mostellar.opteradev.com. If you look at Our Team you will see that it has no URL, just the #, but it is a regular page entry just like the others.

[gigelsmith]

@fmz Sorry man after looking it over, I have no clue. My best uneducated guess :) is that given that the default of twitter-bootstrap won't allow parent clickable links in a dropdown, then the theme itself has something in the php files that I don't have access to, to automatically strip those links? But if you made the theme yourself, then I have no idea. Good luck on the rest of the solution. . .

[forrest]

Thanks for the best efforts there. I'll still give you credit since you resolved the click ability part.

[kamalo]

This is the exact answer I was looking for.

[forrest]

Thanks for the input.

[atif]

Superb one , really appreciated :)

[atif]

Is there any known solution for small devices?

[teninchhero]

You can also just change $atts['data-toggle'] = 'dropdown' to $atts['data-hover'] = 'dropdown' In that case you don't need to change anything in your css.

[klewis]

@gigelsmith I know this answer is dated, but would you happen to know of a way making the parent dropdown link active when you click it twice?

[gigelsmith]

@blackhawk Looks like this question has been asked and answered on stack already stackoverflow.com/questions/24247970/…. This was one of multiple answers I found.

[Hexfire]

If existing answer was helpful, it's suffice to add a comment to it, no need to make a new answer based on its fragment.

[Barry Connolly]

This solution is perfect and has really helped me out . Just one thing to add when you have menus that are more than one child deep you will need to modify the css slightly by adding the ">" .dropdown:hover > .dropdown-menu { display: block; }

[Arman H]

Superb bro. Works like a charm :) .

[Limpuls]

Cheers, I would have never figured this out on my own without PHP knowledge. For those that are going to use search to find that line of code, in my case it was $this->has_children instead of $args->has_children