How To Make Bootstrap Dropdown Menus Expand on Hover

Bootstrap is one of the most popular, if not the most popular, front-end responsive HTML/CSS/JS frameworks for developing responsive websites. It’s incredibly easy to use and has a huge community behind it so there’s no shortage of documentation, code snippets, and tutorials floating around online.

I am full of praise for Bootstrap but I do have one gripe: the dropdown menus simply don’t function the way I’d like.

Normally, when interacting with a dropdown menu item, I would expect it to expand when you hover the menu item with your mouse. The creators of Bootstrap made a conscious design decision and instead require a click for the menu to expand. Not only that, when browsing on a touch device such as an iPad, once you do click to expand a dropdown, there’s no way to close it without clicking a link somewhere on the page which would likely be perceived an as annoying glitch from a user perspective.

Here’s a little jQuery snippet that solves both of these problems in one shot and will allow your visitors to:

  1. Expand the dropdown with a mouse hover.
  2. Close an expanded dropdown by clicking anywhere on the page, on touch devices.
// Mouseover Toggle for Bootstrap Nav Menu
$(document).ready(function() {
  $('.dropdown').hover(function(){ 
    $('.dropdown-toggle', this).trigger('click'); 
  });
});

If you also find the default Bootstrap dropdown behavior doesn’t quite function the way you’d like, this simple little snippet should solve that problem for you.

Leave a Comment

Your email address will not be published. Required fields are marked *