How to change Bootstrap navbar color
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
<h1>Bootstrap Custom navbar Example</h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Web</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">jQuery</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bootstrap <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Carousel</a></li>
<li><a href="#">Forms</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Select</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Find topics">
</div>
<button type="submit" class="btn btn-info">Go</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://www.jquery-az.com/about-us/">Terms</a></li>
<li><a href="https://www.jquery-az.com/contact/">Contact</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
.navbar-default {
background-color: #69899f;
border-color: #425766;
}
.navbar-default .navbar-brand {
color: #d7e2e9;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #e5dbdb;
}
.navbar-default .navbar-text {
color: #d7e2e9;
}
.navbar-default .navbar-nav > li > a {
color: #d7e2e9;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #e5dbdb;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #69899f;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #d7e2e9;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #e5dbdb;
background-color: #425766;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
background-color: #69899f;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #e5dbdb;
background-color: #425766;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #e5dbdb;
background-color: #425766;
}
.navbar-default .navbar-toggle {
border-color: #425766;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #425766;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #d7e2e9;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #d7e2e9;
}
.navbar-default .navbar-link {
color: #d7e2e9;
}
.navbar-default .navbar-link:hover {
color: #e5dbdb;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #d7e2e9;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #e5dbdb;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #e5dbdb;
background-color: #425766;
}
}
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.

Loading...