How to make Bootstrap 3 & 4 dropdowns show on hover for desktop only

It’s a very common question in the Bootstrap community ever since Bootstrap 3 where dropdowns could only be opened on click rather than hover. In this Bootstrap how to for both Bootstrap 3 and Bootstrap 4 we’ll show you how to open Bootstrap dropdowns on hover for desktop but maintain the click trigger for mobile (we recently implemented this for our free Flexor Lite Theme. Don’t blink you might miss it, it’s super simple.

First, what’s the motivation behind this, surely the Bootstrap maintainers know best and that’s why they switched to open dropdowns on click? All true click triggers are much better for mobile but on desktop users really do expect dropdowns to open on hover and links to open on click.

The best approach is have Bootstrap dropdowns show on hover for desktop and click when the mobile collapse is present, so that’s exactly what we’ll do.

There are plugins available to do this already but most have more code and are not ready for Bootstrap 4 yet.


Options

We’re added a simple switch using the navbarToggle variable so you can easily use the same code snippet on both Bootstrap 3 & Bootstrap 4. We also added an data-dropdown-hover-all=true data attribute/option which can be added to the data-toggle="dropdown" elements in order to make the dropdowns show on hover for mobile too. This is useful if the dropdowns are not part of a mobile collapse.


Bootstrap 3 Dropdowns On Hover

Simply add the following Javascript to you site, ideally via an external file.

$(document).ready(function() { 
  var navbarToggle = '.navbar-toggle'; // name of navbar toggle, BS3 = '.navbar-toggle', BS4 = '.navbar-toggler'  
  $('.dropdown, .dropup').each(function() {
    var dropdown = $(this),
      dropdownToggle = $('[data-toggle="dropdown"]', dropdown),
      dropdownHoverAll = dropdownToggle.data('dropdown-hover-all') || false;
    
    // Mouseover
    dropdown.hover(function(){
      var notMobileMenu = $(navbarToggle).size() > 0 && $(navbarToggle).css('display') === 'none';
      if ((dropdownHoverAll == true || (dropdownHoverAll == false && notMobileMenu))) { 
        dropdownToggle.trigger('click');
      }
    })
  });
});

 

Bootstrap 4 Dropdowns On Hover

For the Bootstrap 4 version you just need to change the navbarToggle variable from navbarToggle = '.navbar-toggle' to navbarToggle = '.navbar-toggler', that’s it.

Simply add the following Javascript to you site, ideally via an external file.

$(document).ready(function() { 
  var navbarToggle = '.navbar-toggler'; // name of navbar toggle, BS3 = '.navbar-toggle', BS4 = '.navbar-toggler'  
  $('.dropdown, .dropup').each(function() {
    var dropdown = $(this),
      dropdownToggle = $('[data-toggle="dropdown"]', dropdown),
      dropdownHoverAll = dropdownToggle.data('dropdown-hover-all') || false;
    
    // Mouseover
    dropdown.hover(function(){
      var notMobileMenu = $(navbarToggle).size() > 0 && $(navbarToggle).css('display') === 'none';
      if ((dropdownHoverAll == true || (dropdownHoverAll == false && notMobileMenu))) { 
        dropdownToggle.trigger('click');
      }
    })
  });
});

 

Works great with our Bootstrap DropDown Effects with Animate.css freebie

Simply change the line dropdownHoverAll = dropdownToggle.data('dropdown-hover-all') || false; to dropdownHoverAll = true; or add data-dropdown-hover-all=true to your data-toggle="dropdown" elements to get the animate.css effects triggering on hover.

Check out our Bootstrap DropDown Effects with Animate.css freebie.

4 Comments

  1. j says:

    Thanks but I’m getting TypeError: $(…).size is not a function in BS4 + jquery-3.2.1.min.js

  2. Matthew says:

    I really like this approach for its simplicity, but by default hover is triggered again upon leaving the dropdown-toggle so the dropdown-menu disappears before you can use it?

Leave a Reply

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