Changing The Color Of Active Nav-item

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 back

Solution 1:

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;
}

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul>

Solution 2:

Try using adding color CSS on the a tag:

.navbar-nav > .activea{
    color : aqua;
}

.navbar-toggler:focus {
  outline: 0;
}

.navbar-nav>.active {
  color: aqua!important;
  ** // THIS DOES NOT WORK**
  background-color: chartreuse;
  ** //THIS WORKS**
}

.navbar-nav>.activea {
  color: aqua
}

.nav-item>a:hover {
  color: aqua!important;
}

ulli {
  list-style: none;
  margin: 10px
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><navclass="navbar navbar-light animated fadeInLeft"style="background-color: #C0C0C0 ;"><buttonclass="navbar-toggler navbar-toggler-left"type="button"data-toggle="collapse"data-target="#navbarNav"aria-controls="#navbarNav"aria-expanded="false"aria-label="Toggle navigation"><spanclass="lines"></span><spanclass="lines"></span><spanclass="lines"></span></button><h1class="navbar-brand mb-0 move-header ">NavBrand</h1><divclass="collapse1 animated fadeInLeft"id="navbarNav"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul></div></nav>

Solution 3:

.activea{
  color: red !important;
}

this should work for over-riding the custom bootstrap 4 theme.