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

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


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/


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