Posted By admin
Tags:
How to change Bootstrap navbar color
Demo

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.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *