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

Question

I am running Bootstrap on a WP install and have a problem removing the URL from the parent drop down nav element.

Here is the code. In menu-item-72 you can see that href for our team is just # instead of the right 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 to make it work? I confirmed that the item is associated with an active record.

Answer 1

By default, the parent bootstrap items in the drop-down list 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 http://wpeden.com/tipsntuts/twitter-bootstrap-dropdown-on-hover-and-activating-click-event-on-parent-item/

Answer 2

This worked for me like this: I assume you are using wp-bootstrap-navwalker

Open wp-bootstrap-navwalker.php with your editor and find the line approximately.

 // 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: the $ att ['href'] parameter is now enabled, the $ atts ['data-toggle'] function is disabled, which makes the parent link available.

Now open your .css style and add this piece of code to activate the freeze function for your WordPress menu with a drop down and interactive parent.

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

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

Answer 3

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

Answer 4

To add Sohail Qureshi to the solution, I changed the file a bit and here is a way to convert the parent link to a real 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 links to the page!

Answer 5

Ease of use below code for interactive chat link

 onClick="parent.location='http://www.plus2net.com/'" 

Answer 6

//Wow!!! This code is working correctly. Just paste it in the right place in your project. // If the has_children element adds atts to.

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