How to change Bootstrap navbar color - Bootstrap Snippets

Bootstrap provides two styles that you may specify in the <nav> tag. These classes are:

navbar-default
navbar-inverse

I f you want to change navbar color or background color,you can set style class navr-default,it’s color and background-color

For example,we add style class”my-navbar” to nav tag.

<nav class="navbar my-navbar">

Then,We edit style:

.my-navbar {
 
  background-color: #004080;
 
  border-color: #425766;
 
}
 
.my-navbar .navbar-brand {
 
  color: #fff;
 
}
 
.my-navbar .navbar-brand:hover, .my-navbar .navbar-brand:focus {
 
  color: #AAD5FF;
 
}
 
.my-navbar .navbar-text {
 
  color: #d7e2e9;
 
}
 
.my-navbar .navbar-nav > li > a {
 
  color: #fff;
 
}
 
.my-navbar .navbar-nav > li > a:hover, .my-navbar .navbar-nav > li > a:focus {
 
  color: #fff;
 
  background-color:#B05800;
 
}
 
.my-navbar .navbar-nav > li > .dropdown-menu {
 
  background-color: #2894FF;
 
}
 
.my-navbar .navbar-nav > li > .dropdown-menu > li > a {
 
  color: #d7e2e9;
 
}
 
.my-navbar .navbar-nav > li > .dropdown-menu > li > a:hover,
 
.my-navbar .navbar-nav > li > .dropdown-menu > li > a:focus {
 
  color: #fff;
 
  background-color: #004182;
 
}
 
.my-navbar .navbar-nav > li > .dropdown-menu > li > .divider {
 
  background-color: #69899f;
 
}
 
.my-navbar .navbar-nav > .active > a, .my-navbar .navbar-nav > .active > a:hover, .my-navbar .navbar-nav > .active > a:focus {
 
  color: #e5dbdb;
 
  background-color: #B05800;
 
}
 
.my-navbar .navbar-nav > .open > a, .my-navbar .navbar-nav > .open > a:hover, .my-navbar .navbar-nav > .open > a:focus {
 
  color: #e5dbdb;
 
  background-color: #425766;
 
}
 
.my-navbar .navbar-toggle {
 
  border-color: #425766;
 
}
 
.my-navbar .navbar-toggle:hover, .my-navbar .navbar-toggle:focus {
 
  background-color: #425766;
 
}
 
.my-navbar .navbar-toggle .icon-bar {
 
  background-color: #d7e2e9;
 
}
 
.my-navbar .navbar-collapse,
 
.my-navbar .navbar-form {
 
  border-color: #d7e2e9;
 
}
 
.my-navbar .navbar-link {
 
  color: #d7e2e9;
 
}
 
.my-navbar .navbar-link:hover {
 
  color: #e5dbdb;
 
}
 
 
 
@media (max-width: 767px) {
 
  .my-navbar .navbar-nav .open .dropdown-menu > li > a {
 
    color: #d7e2e9;
 
  }
 
  .my-navbar .navbar-nav .open .dropdown-menu > li > a:hover, .my-navbar .navbar-nav .open .dropdown-menu > li > a:focus {
 
    color: #e5dbdb;
 
  }
 
  .my-navbar .navbar-nav .open .dropdown-menu > .active > a, .my-navbar .navbar-nav .open .dropdown-menu > .active > a:hover, .my-navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
 
    color: #e5dbdb;
 
    background-color: #425766;
 
  }
 
}

You can see We set color and background-color.see demo.you can change the color to you self.
Also make sure that your Css is loaded after bootstrap CDN so that it will not get override by Bootstrap default codes.

(No Ratings Yet)

Loading...