I have a navbar
designed in Bootstrap. I am trying to make it a different color when the class of the nav-item
is set to active
.
However I am not able to do so. When I set the background
the background color is changing, but when I use color
the color is not changing. Note that I'm using Bootstrap v4.
$(document).ready(function() {
"use strict";
$('ul.navbar-nav > li').click(function(e) {
e.preventDefault();
$('ul.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
});
.navbar-toggler:focus {
outline: 0;
}
.navbar-nav > .active {
color: aqua!important; **// THIS DOES NOT WORK**
background-color: chartreuse; **//THIS WORKS**
}
.nav-item > a:hover {
color: aqua!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="lines"></span><span class="lines"></span><span class="lines"></span>
</button>
<h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
<div class="collapse animated fadeInLeft" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
color: It specifies the background color of element. transparent: It specifies that the background color should be transparent. Hence, the background color of an active nav-item can be changed in the following manner by changing the background-color CSS property.
The default font-color is white of the active nav-link in the case of Bootstrap nav-active item. The first-way approach is to use a CSS styling file and changing the nav-item class when clicked. The second-way approach is to change the color using jQuery .css () property and also changing the class status to active for a nav-item using jQuery.
Approach 2: To change font-color of active-nav using jQuery: To change the font-color of the active-nav link using jQuery, we need to add the active class to that particular nav-item and then we just need to apply the .css (property,value) to change the font- color of the active nav-item. The active link color changed to red.
Given an HTML document containing a list of items and the task is to change the background color of list of items when the item is active. The state of list of items can be changed by changing the background-color CSS property.
The issue is because the .nav-item > a:hover
is more specific than .navbar-nav > .active
. To fix this, remove the !important
operator (as you should avoid it at all costs) and make the rule you want to override more specific.
.navbar-nav > .active > a {
color: aqua;
background-color: chartreuse;
}
.nav-item > a:hover {
color: aqua;
}
$(document).ready(function() {
"use strict";
$('ul.navbar-nav > li').click(function(e) {
e.preventDefault();
$('ul.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
});
.navbar-nav > .active > a {
color: aqua;
background-color: chartreuse;
}
.nav-item > a:hover {
color: aqua;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Try using adding color CSS on the a
tag:
.navbar-nav > .active a{
color : aqua;
}
.navbar-toggler:focus {
outline: 0;
}
.navbar-nav>.active {
color: aqua!important;
** // THIS DOES NOT WORK**
background-color: chartreuse;
** //THIS WORKS**
}
.navbar-nav>.active a {
color: aqua
}
.nav-item>a:hover {
color: aqua!important;
}
ul li {
list-style: none;
margin: 10px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="lines"></span><span class="lines"></span><span class="lines"></span></button>
<h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
<div class="collapse1 animated fadeInLeft" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
</ul>
</div>
</nav>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With