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

Share on facebook
Facebook
Share on twitter
Twitter

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.

Let's Talk
We can't wait to hear about your project.
  • required
  • required
  • required
  • required
    *Sorry, "Johnny Flyaway" recently retired. We hope an email response or phone call will suffice.
    Spam isn't fun. We promise to only send you emails with helpful marketing & design tips, and life changing information. Ok, maybe the latter is a bit of an exaggeration, but it's possible!
  • This field is for validation purposes and should be left unchanged.
Web & Logo Design Blog

© 2021 Brian Joseph Studios LLC. All rights reserved

Facebook | Twitter | Instagram | Web Design Naples | Web Design Fort Myers | Logo Design Fort Myers | Logo Design Naples | LinkedIn | Thumbtack | Brian Joseph Studios is featured on Florida Web Design

Fort Myers - (239) 989 3306 | Naples - (239) 280-1294

Google Business Listing - Brian Joseph Studios - Naples Web Design Company