Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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>
like image 603
Rehan Avatar asked Jan 19 '17 13:01

Rehan


People also ask

How to change the background color of an active Nav-item?

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.

How to change the color of the active Nav-link in Bootstrap?

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.

How to change the font-color of active-Nav link 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.

How to change the background color of list of items?

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.


2 Answers

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>
like image 95
Rory McCrossan Avatar answered Sep 22 '22 07:09

Rory McCrossan


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>
like image 43
Mukesh Ram Avatar answered Sep 24 '22 07:09

Mukesh Ram