How to Change Bootstrap NavBar DropDown Hover Color

We can easily customize the Bootstrap DropDown component’s hover color using a couple of different methods. We can change Bootstrap color variables or create a selector that targets the hover pseudo class.

Here’s what we will build in this tutorial:

Bootstrap NavBar DropDown with Custom Hover Color
Bootstrap NavBar DropDown with Custom Hover Color

Full code for this demo is in the Resources section.

Change Bootstrap NavBar DropDown Hover Color with Bootstrap Variables

Bootstrap has lots of variables that automatically apply to components without any customization required. We can use these variables to theme an application.

If we open dev tools, we can see the CSS classes and tags used to apply default Bootstrap styling:

To find the variable values that support these tags, click into the tag and then open the file with the default Bootstrap styling, which is _dropdown.scss here.

Bootstrap DropDown Style Variable Names
Bootstrap DropDown Style Variable Names

Now we know exactly which variables to customize in our .scss file. I will set a purple background color and green text color with the following code:

$dropdown-link-hover-bg: purple;
$dropdown-link-hover-color: green;

Change Bootstrap NavBar DropDown Hover Color with a Selector

If we want a more traditional CSS method for styling the NavBar DropDown hover color, we can use the existing dropdown-item class and add a hover pseudo selector:

.dropdown-item:hover {
  background-color: green;
  color: $warning;
  margin: 2px;
  width: calc(100% - 4px);
  border-radius: 4px;
}

In this example I used another pre-existing Bootstrap variable, $warning. This is an orange color that is used with any warning classes, i.e. bg-warning.

Here are more examples of customizing NavBar color.

Resources

Read here how to customize Bootstrap’s NavBar expand and collapse.

Here is the full code for this tutorial:

//NavBarHoverDropDown.scss
$dropdown-link-hover-bg: purple;
$dropdown-link-hover-color: green;

@import "bootstrap/scss/bootstrap";

.dropdown-item:hover {
  // background-color: green;
  // color: $warning;
  margin: 2px;
  width: calc(100% - 4px);
  border-radius: 4px;
}

//NavBarHoverDropDown.tsx
import React from "react";
import "./NavBarHoverDropDown.scss";

export default function NavBarHoverDropDown() {
  const [isDropDownOpen, setIsDropDownOpen] = React.useState(false);
  return (

    <nav className="navbar navbar-expand-md navbar-light bg-light">
      <div className="container-fluid">
        <a className="navbar-brand" href="#">Navbar With Hoverable DropDown</a>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item dropdown">
              <button onClick={() => setIsDropDownOpen(!isDropDownOpen)} className="nav-link dropdown-toggle rounded" id="navbarDropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </button>
              <div className={`${isDropDownOpen ? "show" : ""} dropdown-menu`} aria-labelledby="navbarDropdown">
                <a className="dropdown-item" href="#">Action</a>
                <a className="dropdown-item" href="#">Another action</a>
                <div className="dropdown-divider"></div>
                <a className="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}
Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.