2 Ways for Hover Dropdown in Bootstrap 3 Navbar

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.

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.

You Might Interested In