Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap 4

How to Make the Bootstrap Navbar Dropdown Work on Hover

by
Difficulty:BeginnerLength:ShortLanguages:

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:

The required Bootstrap CSS files
The required Bootstrap CSS file
The required Bootstrap JavaScript files
The required Bootstrap JavaScript files

2. Build a Simple Navbar

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

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.

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:

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:

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:

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.