How to Customize Bootstrap NavBar Background and Text Color

The Bootstrap NavBar has several available classes for optimizing text color, background color, and other properties. However, understanding when to use these classes and how to customize them can be challenging. In this tutorial we will create a NavBar with the following custom features:

• Background Color
• Text Color
• Hover Color
• SCSS Variables for Theming the NavBar

Here is the Bootstrap NavBar what we will build in this demo:

This demo uses the navbar-dark, bg-dark, navbar-nav, and text-success classes. Full code is in the Resources section.

Bootstrap NavBar Background Color Classes

In Bootstrap the NavBar component is designated with the navbar class. Children elements are transformed into supporting NavBar subcomponents when they have classes like navbar-brand or navbar-text.

Here is the full list of Bootstrap 5 NavBar component classes.

By default, none of these classes provide a background color. Instead, we can use one of the Bootstrap background color classes. These classes follow “typical” web dev design patterns and have a primary, secondary, warning, success, and other classes.

For this demo, I added bg-dark to the topmost navbar component:

Notice that the bg-dark class applies a background color using variables and tags. This means we can customize the bg-dark class across the entire app if desired. I will show an example of changing the variables in a later section.

To achieve the inner whitesmoke background, I customized the existing navbar-collapse class:

.navbar-collapse {
  background-color: whitesmoke;
}

This leaves existing navbar-collapse class styling in place and adds a background color.

Finally, I added the bg-warning class to the button element to add the orange background color. Without this, the button would not have a background color and would blend in with the rest of the NavBar.

Next, try customizing the Bootstrap Accordion background color.

Bootstrap NavBar Text Color Classes

The subcomponent classes in the NavBar often come with color styling. The first component inside my NavBar is the Brand component which is created with the navbar-brand class:

Notice that it has a color that comes from the --bs-navbar-brand-color. This is applied by the navbar-brand class.

Additionally, I have the navbar-dark class on the outermost NavBar element. If a specific subcomponent doesn’t get text color from it’s own class, it will receive it from the navbar-dark class.

After the NavBar Brand component comes a wrapping NavBar Collapse component. This is created by adding navbar-collapse to a div. It controls the collapse and expand styling for the elements it contains.

The NavBar collapse component does not have a default text color, so its components receive their color from navbar-dark.

In the image above, you can see that the navbar-dark color is set to a green color. That is a custom color I set through a variable. In the next section I’ll show how to customize these variables.

I used the rounded-start class to add the left border radius to the NavBar Collapse component.

Customizing Bootstrap NavBar Color Variables

We’ve seen in previous examples that Bootstrap NavBar classes often get their color values from Bootstrap variables. We can customize these variables and impact the behavior of all classes that use the variables.

Let’s drill down into how to find a variable to customize. I’ve stripped the custom values off of the variables. You can see that the default nav-link class has a white text color obtained from --bs-nav-link-color. Click on the tag value in Chrome dev tools.

Keep drilling into the tags for color until you get to the below navbar-dark section. Then click the link to _navbar.scss:267.

This will take you to the names of the variables used for navbar-dark. Once you have the variable names, you can customize the variables in your .scss file.

//CustomColorNavBar.scss

$navbar-dark-brand-color: rgba(140, 143, 143, 0.781);
$navbar-dark-color: #198754;

@import "bootstrap/scss/bootstrap";

Now your app will use these color values anywhere that the $navbar-dark-brand-color and $navbar-dark-color are used.

Customizing Bootstrap NavBar Link Hover Color

Many of the NavBar classes come with a hover color. Explore a component in dev tools to see if it has a hover color. In my tutorial I used nav-link component which has a hover color built in:

I customized this value by adding $navbar-dark-hover-color: #5dd39c; in my .scss file. Like I explained in the previous section, I drilled into the tags and files in Chrome dev tools.

Changing variable colors provides two benefits:

• It consistently changes all classes using the variable so you write less code
• We don’t have to construct complex selectors to overcome default Bootstrap styling.

You can also customize NavBar dropdown hover color.

Resources

Check out this demo to see how to make the NavBar full height and have left-to-right open.

Here is the complete code for this demo. It is based on the demo in the Bootstrap docs under the “NavBar Supported Content” section.

//CustomColorNavBar.scss

$navbar-dark-brand-color: rgba(140, 143, 143, 0.781);
$navbar-dark-color: #198754;
$navbar-dark-hover-color: #5dd39c;

@import "bootstrap/scss/bootstrap";

.navbar {
  padding: 2px 0px 2px 2px
}

.navbar-collapse {
  background-color: whitesmoke;
}

//CustomColorNavBar.tsx

import React from "react";
import "./CustomColorNavBar.scss";

export default function CustomColorNavBar() {
  const [isDropDownOpen, setIsDropDownOpen] = React.useState(false);
  return (
    <nav className="navbar navbar-expand-md navbar-dark bg-dark">
      <a className="navbar-brand" href="#">Navbar</a>

      <div className="navbar-collapse rounded-start" id="navbarSupportedContent">
        <ul className="navbar-nav mr-auto" style={{ padding: 2 }}>
          <li className="nav-item active">
            <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Link</a>
          </li>
          <li className="nav-item dropdown">
            <button onClick={() => setIsDropDownOpen(!isDropDownOpen)} className="nav-link dropdown-toggle bg-warning 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>
          <li className="nav-item">
            <a className="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
  );
}