Fixed-theme Bootstrap Navbars

Introduction

Bootstrap provides a Navbar component that is a navigation header. Typically, the Navbar contains:

• branding text and/or a logo that identifies the company or website
• navigation links to major sections of the website
• additional links or settings such as a GitHub repo link or color theme selector

Both the Bootstrap and React Bootstrap sites sport Navbars with a fixed color theme. That is, colors used by the Navbar stay the same regardless of whether color theme of the overall site is set to light or dark mode.

For me, it was far from obvious how one would reproduce this kind of behavior for one's own website when using Bootstrap. In this article, I'll detail what worked for me and any insights that I thought were particularly interesting.

Baseline Behavior of Bootstrap Navbars

By default, with regard to colors, Bootstrap Navbars behave very similarly to elements that would typically appear in the main element of a website, such as Cards.

More specifically, when the site has a light theme, the Navbar has a light background and dark text.

When the site has a dark theme, the Navbar has a dark background and light text.

Setting the Navbar to Use a Fixed Background Color

Let's attempt to replicate the design of the Bootstrap and React Bootstrap sites. Those sites have a relatively dark, fixed, background color for the Navbar. We can start off by setting the background color of the Navbar to one of the theme colors.

For React Bootstrap, we can use the bg prop of Navbar. Alternatively, we can a utility class like bg-primary, which can be used regardless of whether we are using React Bootstrap.

Below is a code snippet of applying the primary theme color to the Navbar component of React Bootstrap.

<Navbar bg="primary">
{
    // NavBar contents...
}
</Navbar>

Upon making this change, we can observe that in light mode, the text is dark over the newly added dark background, posing issues with contrast.

// other rules...
 
.custom-navbar {
  @media (forced-colors) {
    background-color: Canvas;
  }
 
  .navbar-brand {
    color: $white;
  }
 
  .nav-link {
    color: rgba($white, .85);
 
    &:hover,
    &:focus {
      color: $white;
    }
 
    &.active {
      font-weight: 600;
      color: $white;
    }
  }
}

<Navbar bg="primary" className="custom-navbar">
{
    // NavBar contents...
}
</Navbar>

.custom-navbar {
  background-color: $blue-600;
 
  // rest of SCSS rules...
}

<Navbar className="custom-navbar">
{
    // NavBar contents...
}
</Navbar>

Closing Thoughts

The amount of effort needed to achieve a Navbar that mimics the style of Bootstrap's official documentation site may indicate that this an area ripe for improvement in an upcoming version of Boostrap. Given that dark mode is only relatively recently well-supported by Bootstrap, this finding is not too surprising.

Source Code

For brevity, many of the implementation details of the project were left out. To see the entirety of the project used to demonstrate the concepts explored in the article, go the navbar branch of a Next.js and dark mode demo project. The project was also used in the Dark Mode with Next.js and Bootstrap article.

Discussion

If you have questions or comments about:

• things I may have missed
• things I got wrong
• better ways of doing things

feel free to post in the discussion section of the repo for this site on GitHub.