Making Bootstrap Nav Bars Drop-down on Hover

Bootstrap navigation bars drop-down on click by default. However, if you want to change this to drop-down on hover, the process is simple.

To make the drop-down appear on hover, simply add the following code to your Bootstrap site’s CSS file:

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

Factoring in Small Screens

However, keep in mind that you may want to keep the drop-down on click for smaller screens, so that tablet and smartphone users can successfully interact with your site.

To enable hover for bigger devices, but keep the drop-down on click for smaller devices, you need to use a media query.

@media only screen and (min-width: 768px) {
  .dropdown:hover .dropdown-menu{
     display:block;
  }
}

This code will revert the drop-down to click for devices whose screens are smaller than 768 pixels (such as a smartphone and tablet). Larger devices over 768 pixels (like laptops and desktops) will display the drop-down on hover.

Place this code in your Bootstrap site’s CSS file and upload to your server.