CODEWITHSUNDEEP
wordpresstwitter-bootstraptwitter-bootstrap-3navigation
forrest
forrest

Reputation: 11012

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

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.

Upvotes: 14

Views: 48841

Answers (7)

Amir Ur Rehman
Amir Ur Rehman

Reputation: 670

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.

Upvotes: 4

Mazedul Islam
Mazedul Islam

Reputation: 1

// Wow!!! This code is working properly. Just paste it into the right place on your project. // 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 : '';
}

Upvotes: -1

SantoshK
SantoshK

Reputation: 1877

Easy to use below code for clickable link in drapdown

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

Upvotes: -1

user5890887
user5890887

Reputation: 85

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!

Upvotes: 4

ksg
ksg

Reputation: 4067

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

Upvotes: 11

Sohail Qureshi
Sohail Qureshi

Reputation: 691

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.

Upvotes: 36

gigelsmith
gigelsmith

Reputation: 947

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/

Upvotes: 45

Related Questions