Web Design Tip : How to make the parent link item clickable in Twitter Bootstrap

If you’re using a WordPress theme that takes advantage of the Twitter Bootstrap framework, you may be looking for a way to make changes to the built-in navigation of the framework. By default, when you have a drop down navigational menu, the parent link is clickable, but rather than opening the page that it links to (if you’re using WordPress menus), it displays the sub menu items.

We were recently working on a website design for a client that wanted the parent link to go to the page it was linked to, and to have the drop down menu open on hover, rather than onclick. To accomplish this, we removed the data-toggle=”dropdown” from within the WordPress theme’s functions.php file.

Make sure to remove this line if you see it in a javascript file:

$('.dropdown-toggle').dropdown();

Also, add this to the bootstrap.css file (or wherever your theme has the nav classes) :

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block; 
    margin: 0   
}

a.menu:after, .dropdown-toggle:after {
  content: none;
}

This makes the parent link item clickable to the destination URL that you set within the WordPress menu if that’s what you’re using to display the navigation menu, and it also displays the dropdown on hover.