Make Bootstrap nav dropdown appear on hover

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;
}

Useful post? Share it

Leave a Reply

Your email address will not be published.