How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns

Your bootstrap top level menu will not be clickable when you add more menus under it like sub-navs or dropdowns. There are some How-Tos of adding a snippet of JavaScript or php online to make it work, but it seems to be risky and complicated.

Here’s a simple solution changing 1 word from your Bootstrap HTML file:

<li class="dropdown" data-dropdown="dropdown"> 
   <a href="URL" class="dropdown-toggle" data-hover="dropdown">X</a> 
   <ul class="sub-menu dropdown-menu"> 
      <li></li> 
   </ul> 
</li>

Change data-toggle to data-hover. Done!

If you use “Bootstrap-basic” theme on your WordPress, look for a file called, “BootstrapBasicMyWalkerNavMenu.php” under “inc” folder. Find the code “data-toggle” and replace with “data-hover“. Isn’t this super easy!?

One thought on “How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns

Leave a Reply

Your email address will not be published. Required fields are marked *