change html navbar color code example
Example 1: navbar background color css
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
Light color background
</a>
</nav>
<nav class="navbar navbar-light bg-warning">
<a class="navbar-brand" href="#">
Warning color background
</a>
</nav>
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">
Dark color background
</a>
</nav>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">
Primary color background
</a>
</nav>
<nav class="navbar navbar-dark bg-secondary">
<a class="navbar-brand" href="#">
Secondary color background
</a>
</nav>
<nav class="navbar navbar-dark bg-success">
<a class="navbar-brand" href="#">
Success color background
</a>
</nav>
Example 2: changing navbar color bootstrap
$bgDefault : #e74c3c;
$bgHighlight : #c0392b;
$colDefault : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
background-color: $bgDefault;
border-color: $bgHighlight;
.navbar-brand {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.navbar-text {
color: $colDefault; }
.navbar-nav {
> li {
> a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}}
> .active {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}
> .open {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}}
.navbar-toggle {
border-color: $bgHighlight;
&:hover, &:focus {
background-color: $bgHighlight; }
.icon-bar {
background-color: $colDefault; }}
.navbar-collapse,
.navbar-form {
border-color: $colDefault; }
.navbar-link {
color: $colDefault;
&:hover {
color: $colHighlight; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu {
> li > a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
> .active {
> a, > a:hover, > a:focus, {
color: $colHighlight;
background-color: $bgHighlight; }}}
}