How to Change Bootstrap Navbar Color

18 Feb 2023

You can always change the color of the navbar on a Bootstrap website to match your website’s branding.

Follow these steps to change the color of your Bootstrap navbar:

Check the HTML code and identify the CSS class that controls the appearance of the navbar. The default Bootstrap navbar class is navbar navbar-default.

2. Create a custom CSS file

Create a new CSS file and link it to your HTML file, or add the CSS code to the existing stylesheet. This is where you will define your custom styles for the navbar.

3. Override the default styles

To change the color of the navbar, you need to override the default styles. You can do this by targeting the navbar navbar-default class in your custom CSS file and adding your own styles.

For example, to change the background color of the navbar to blue, you can add the following code:

.navbar-default {
  background-color: blue;
}

4. Customize the hover and active states

By default, the background color of the navbar changes when you hover over it or when a menu item is active. You can customize these states by adding the following code to your custom CSS file:

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  background-color: blue;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: blue;
}

5. Save and refresh

Save your changes and refresh your web page to see the updated navbar color.

Changing the color of your Bootstrap navbar is a simple process that can be done by overriding the default styles in your custom CSS file. By following these steps, you can create a navbar that matches your website’s branding and enhances its overall look and feel.