Make Bootstrap nav dropdown appear on hover

By 12th October 2016Blog

Both Bootstrap version 3 & 4’s default navigation has nav menus toggled on click enabled by default — you have to actually click the parent item to have them open/show the sub-menu, and click again to them shut.  This is fine for some applications, but the default behaviour of most navigations is to show the dropdown / sub-navigation on hover.

Achieveing this in either Bootstrap 3 or Bootstrap 4 is really simple.  Add the below CSS to your stylesheet to enable hovering for menus:

.dropdown:hover .dropdown-menu {
display: block;


I'm a Wordpress web developer and website designer based in Cheshire, UK. I specialise in Wordpress, Responsive design and website conversion. | Twitter | Linkedin

Leave a Reply