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:
0 1 2 3 4 5 | @media (min-width: 768px) { .dropdown:hover .dropdown-menu { display: block; } } |
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.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $(document).ready(function() { function bindNavbar() { if ($(window).width() > 767) { $('.navbar-default .dropdown').on('mouseover', function(){ $('.dropdown-toggle', this).next('.dropdown-menu').show(); }).on('mouseout', function(){ $('.dropdown-toggle', this).next('.dropdown-menu').hide(); }); $('.dropdown-toggle').click(function() { if ($(this).next('.dropdown-menu').is(':visible')) { window.location = $(this).attr('href'); } }); } else { $('.navbar-default .dropdown').off('mouseover').off('mouseout'); } } $(window).resize(function() { bindNavbar(); }); bindNavbar(); }); |
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.
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?
Hi,
There are 2-3 ways to perform the same and the easiest way for you is to include DoubleTapToGo plugin as described in the link below:
https://github.com/zenopopovici/DoubleTapToGo
If you feel any difficulty to implement or do it by other ways, you can write us at:
http://fellowtuts.com/troubleshooting/
Thanks again, I’ll check it out!
Thank you so much! I was looking for this solution!!!
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!
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
Thank you so much, Amit! This was very helpful. I am going to stick to the CSS change only for now. Best Wishes!