Have you ever created a Bootstrap navbar with dropdown menus? If the answer is “yes”, you may have noticed that the Bootstrap dropdowns don’t appear by hovering over the parent link. Instead, they appear by clicking on it. This an intentional design decision according to Mark Otto, one of Bootstrap’s founders:

“The purpose of a hover state is to indicate something is clickable (underlined text) or to provide some quick information (full URL in a tooltip). The purpose of a click is to actually do something, to take an explicit action.” – Mark Otto

Fair point Mark! But there are still some situations where developers might prefer a hover. So in this short tutorial we’ll build a typical Bootstrap navbar with a quick solution for showing its dropdowns on hover.

Note: This tutorial assumes you have some familiarity with Bootstrap 4.

Bootstrap Navbar Dropdown on Hover

Here’s what we’re going to build. 

Note: So that we can see the dropdowns in action embedded on this page I’ve used Bootstrap’s responsive expanding classes; the navigation now expands from its mobile state on the medium breakpoint (768px by default). You may prefer to use the larger breakpoint to avoid the double-tap hover on iPads.

Better still, as you shouldn’t judge a screen’s touch ability by its size, you could use CSS Level 4 Media Queries to detect whether a user can hover, or JavaScript feature detection like Modernizr. Neither of these are 100% foolproof, however.

Anyway, let’s get started!

1. Include Bootstrap Assets

To kick things off we’ll include the required CSS and JavaScript files within our Codepen demo:

2. Build a Simple Navbar

To create our navbar we’ll rely on some example code for the navbar component, kindly provided by Bootstrap:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container-fluid"><a class="navbar-brand" href="#"><img class="logo horizontal-logo" src="horizontal-logo.svg" alt="forecastr logo"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav ml-auto"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown</a><div class="dropdown-menu" aria-labelledby="navbarDropdown1"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Something else here</a></div></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown</a><div class="dropdown-menu" aria-labelledby="navbarDropdown2"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Something else here</a></div></li>
        ...</ul></div></div></navbar>

3. Add Some Basic Styles

Next we specify three basic CSS rules for our component. They don’t do much, just add some stylistic spacing and make the dropdown arrow transition downwards when the dropdown is activated.

.navbar .nav-item:not(:last-child) {
  margin-right: 35px;
}

.dropdown-toggle::after {
   transition: transform 0.15s linear; 
}

.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

That’s it! So far we’ve managed to build a typical Bootstrap navbar:

Check the desktop version of the navbar to get a proper impression of what’s going on. In any case notice that the dropdowns open each time you click on the corresponding parent link.

4. Customizing Dropdowns

Let’s now customize the default behavior of the dropdowns.

On small screens and below (<768px), they’ll still appear by clicking on the parent link. However on medium screens and above (≥ 768px), we’ll make them appear by hovering over the target item.

To achieve this, we’ll first remove the default top margin of the dropdown menus. We need to remove this gap so that the user’s cursor can move from parent link to the dropdown without deactivating everything again:

.dropdown-menu {
  margin-top: 0;
}

Next, we’ll write some jQuery code that will perform the following actions:

• This code will run on page load and window resize.
• If the viewport is at least 768px wide, we’ll capture the mouseenter and mouseleave events on the menu items that contain dropdowns. We’ll use the hover event as a shorthand of those events.
  
• Each time we hover over a dropdown menu item, it’ll receive the Bootstrap predefined show class. The same class will be added to its dropdown menu. Finally, for accessibility reasons, the value of the aria-expanded attribute of the dropdown’s toggle link will change to true. The opposite will happen each time we stop hovering over a dropdown menu item.
• If the viewport has a maximum width of 767px, we'll unbind the handlers attached to the mouseenter and mouseleave events. This will prevent our hover behavior taking effect on smaller screens.

With all the above assumptions, here’s the jQuery code that we’ll need:

const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";

$(window).on("load resize", function() {
  if (this.matchMedia("(min-width: 768px)").matches) {
    $dropdown.hover(
      function() {
        const $this = $(this);
        $this.addClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "true");
        $this.find($dropdownMenu).addClass(showClass);
      },
      function() {
        const $this = $(this);
        $this.removeClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "false");
        $this.find($dropdownMenu).removeClass(showClass);
      }
    );
  } else {
    $dropdown.off("mouseenter mouseleave");
  }
});

And the resulting demo:

To see the new functionality in all its states, be sure to check the fullscreen version of this demo.

Conclusion

That’s all folks! With just a few lines of code we’ve managed to customize the default functionality of the Bootstrap navbar dropdowns.

Keep in mind that we only covered situations where the dropdowns are part of a Bootstrap navbar. Also bear in mind that our customization may not be suitable for all cases. If you have any other solutions to this puzzle, let us know in the comments.

As always, thanks a lot for reading!

Further Reading

If you enjoyed this Bootstrap customization, you might also want to have a look at the following tutorials:

• Quick Tip: How to Customize Bootstrap 4’s Accordion Component

  In this quick tip, we’ll build a Bootstrap 4 accordion and apply a few customizations to it. Let’s get started!

• How to Customize Bootstrap’s Sass Files With Grunt

  Today, we'll learn how to customize Bootstrap 4's Sass files with Grunt. Instead of Grunt, we could just as easily use another task runner like Gulp,...

• How to Add Deep Linking to the Bootstrap 4 Tabs Component

  In this new tutorial we’ll learn how to add deep linking to the Bootstrap 4 tabs and make them shareable.

We also have several roundups of best-selling Bootstrap templates:

• Bootstrap
  20 Amazing Bootstrap Templates to Try in 2019
  Paula Borowska
• Bootstrap
  15 Feature-Packed Bootstrap Admin Templates
  Ian Yates