2 Ways for Hover Dropdown in Bootstrap 3 Navbar

The Bootstrap 3 css framework contains a pretty good navigation component called “navbar” which automatically collapse when the viewport is too small. The dropdown menu’s of the navbar opens when clicking the main item. For a tablet or phone this behavior is fine, but when using a desktop you might want the menu’s to open when hovering them.  So here we are discussing 2 Ways for Hover Dropdown in Bootstrap 3 Navbar.

Hover dropdown in bootstrap 3 navbar

2 Ways for Hover Dropdown in Bootstrap 3 Navbar

The first one is just CSS solution. Put the following CSS in your CSS file:

This CSS solution will allow you to expand dropdown on hover at desktop or devices with viewport size > 767px while in collapsed nabvar, the dropdown will work with click which is fine for tablets and mobile browsers.

The another one is jQuery and the window can be resized and it no longer uses any click trigger but directly shows or hides the dropdown menu so effects or animations can be added to script.

 We have added $('.dropdown-toggle').click(function() event because we wish to keep the parent clickable and we only need to follow the href when the dropdown-menu below it, is visible. So above one is complete code. You can use either of 2 Ways for Hover Dropdown in Bootstrap 3 Navbar between CSS or jQuery.

Like this Post? Share
  • Kelsey

    Hi Amit, This is really great! The CSS code works. Can you help me understand where to add the jquery? Is that in bootstrap.min.css? Thanks!

    • Amit Sonkhiya

      HI,

      Don’t touch Bootstrap’s default files because it’s a bad practice and you will loose the changes if you use newer version of Bootstrap later. You can use either of the solutions (not both) explained in the article.

      You can add CSS in theme’s stylesheet or any custom stylesheet you have included in project (file ending with extension .css) or can directly add under head in style tag.

      Or you can add jQuery in any custom script file you have (file ending with extension .js) or can add to footer before end of body in script tag. If you face any issue, please let me know. We can do this for you with best practice.

      Thanks

      • Kelsey

        Thank you so much, Amit! This was very helpful. I am going to stick to the CSS change only for now. Best Wishes!

  • Rigo Collazo

    Thank you so much! I was looking for this solution!!!

  • Ruffian

    Thanks, this is great. Would there be a way to allow something like a double-tap on a mobile device that would still allow the parent link to be visited?