29 Oct 2013
Bootstrap 3: How to Enable Hover and Toggle for Nav
By default, Bootstrap 3’s navigation has menus toggle’able — you click to have them open / show, and click to have them shut (hide).
Wouldn’t it be nice to also have menus open through hovering your mouse over them?
Luckily, it isn’t complicated to do!
And the best part? It only takes minor CSS to achieve this effect.
Use the below CSS to have both toggling and hovering for menus.
.dropdown:hover .dropdown-menu {
display: block;
}
Told you it was simple.
Bootstrap 3 is pretty awesome, by the way. It is one of the better mobile-first frameworks out there. Check it out if you haven’t!
Incoming search terms:
- Bootstrap3:HowtoEnableHoverandToggleforNav|AGeekandHisBlog
- bootstrap menu hover
- bootstrap dropdown hover
Very simple and very useful!
That’s the beauty of Bootstrap for ya
Nice work Mike, simple and elegant.
One thing I would add, you might want to put this on your css page like this:
@media (min-width:769px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
That removes the hover effect on smaller mobile devices. If you’re like me and test things by squeezing in your browser window it can make the menu pretty jumpy otherwise…
Eric
Thanks for the suggestion!
I am a fellow browser-resizer too, so that’s definitely helpful. Cheers
Thanks…..!!!!!. It was very helpful
Hi,
I have one small issues in mobile view… Please check my code and let me know ur comments.. Please check the below code in mobile view.. Once u click on mobile app that link does nt work for me…
Mobile Apps
iPhone Apps
Android Apps
Window Apps
iPad Apps
Tablet Apps
Hi Raj,
I recommend pasting the code into http://pastebin.com/ so that it can easily be viewed
Hi Michael,
Please find the below link and let me know ur comments..
http://pastebin.com/PtC1gM4q
It works for me. However, you do have an onclick event occurring for that link, as well as the Gadget Apps link.
Mobile Apps
This means that you will be taken to a new page before the menu pops up. Depending on what you would like to do, I’d recommend removing the onclick=”location.href=’mobile-apps.html’”
http://bootply.com/108041
Thank You So much Michael…
Now it working… 
No problem! Glad to help!
Thank you! easy way to do it.
Hi! I’m having trouble getting it to work on windows devices with touch. For example on Windows Surface and Lumia phones. Any experience with those?
The thing is that the menus open and then closes immediately.
Thanks!
it doesnt work on multiple levels menu
failed hover state on parent li while showing on sub-menus. highlight the parent li when mouse on sub-menu items.
ul.navbar-nav > li > ul{display:none;}
The above solution causes the drowpdown menu to show even when you hover outside the .dropdown-toggle button but are still inside the wrapper .dropdown div. Also the menu doesn’t get dismissed when selecting a menu item. There is a plugin that addresses all these issues: https://github.com/CWSpear/bootstrap-hover-dropdown
thanks bro.. its so useful to me.. God bless