How to change navbar color in Bootstrap with css


This post talks about multiple ways to solve below items in Bootstrap 4.

  • How to change color of an text color in navbar bootstrap
  • Change background color navigation bar

navbar in bootstrap can be created as follows

<nav class="navbar navbar-default" role="navigation"></nav>

Default background color is white and color is blue. In bootstrap, Changing the color of navigation is not that easy, as it contains brand, anchor links inside it.

Bootstrap classes are LESS based styles, which you need to know the parent and child classes used inside navigation bar

By default navigation bar is transparent, that means text color is sync with background color

Bootstrap provides two inbuilt selectors for text colors.

  • navbar-light This is used to change text color to dark from light and background colors are light only.
  • navbar-dark It changes text color from light to dark and background color is dark.

Background color change

Bootstrap 4.5 provides following inbuilt classnames we can use in navigation bar

  • bg-primary - primary color
  • bg-secondary - change background color to secondary
  • bg-success - change background to success color
  • bg-danger - updates background to danger color
  • bg-warning - warning color is updated in background
  • bg-info - information color is updated in background
  • bg-light- light color
  • bg-dark - dark color
  • bg-white - background color is white

So we can use following approaches to change colors for navigation

  • custom css class
  • style attribute
  • Inbuilt selectors

Here is an example using navbar-light/dark and bg-light/dark

<nav class="navbar navbar-expand-lg  navbar-light bg-light">

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Website</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>

  </div>
</nav>
<nav class="navbar navbar-expand-lg  navbar-dark bg-dark">

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Website</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>

  </div>
</nav>
<nav class="navbar navbar-expand-lg  navbar-dark bg-success">

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Website</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>

  </div>
</nav>
<nav class="navbar navbar-expand-lg  navbar-dark bg-danger">

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Website</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>

  </div>
</nav>

Output:

navbar color change boostrap
Inbuilt selectors

We can override the inbuilt selectors in CSS for color, However this will effects in other places where this classnames are being used. It is not recommended to use override classnames

custom css class

This is another way existing css selectors are not touched, It is clean way of changing color. Create a CSS class navbar-customclass or your name

// custom class for background
.navbar-customclass {
    background-color: blue;
}
/* changing brand text color*/
.navbar-customclass .navbar-brand,
.navbar-customclass .navbar-text {
    color: #ffffff;
}
/* navigation link text color */
.navbar-customclass .navbar-nav .nav-link {
    color: rgba(255,255,255,.6);
}
/* navigation links anchor hover and active styles */
.navbar-customclass .nav-item.active .nav-link,
.navbar-customclass .nav-item:hover .nav-link {
    color: #ffffff;
}

Codepen example

This example is the code for creating custom class for navigation bar

style attribute This is not recommeded approach as it only applies to inline elements fo navigation bar, You have apply in each child element of an navbar.

So we have to change entire brand,nav links colors, This is not recommended approach

Conclusion

Similar Posts