Laxus Laxus - 6 months ago 104
jQuery Question

change the default color of .active tab bootstrap

I want to change the color of the active tab on my navbar, I'm using bootstrap, here's my code:

<body>
<nav class = "navbar navbar-default navbar-fixed-top">
<div class = "container-fluid">
<div class = "navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_navbar">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div class="collapse navbar-collapse" id="main_navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
</nav> </body>


I tried to change it with this but didn't work(css file):

.active {
background-color: green !important;
}


also like this(javascript file):

$(document).ready(function() {
$('.active').css("background-color", "green");
});


EDIT:

I tried to explain more with code snipet but the css part did not work for me,

if I add this to my css file:

.navbar {
background-color: yellow;

}


The whole bar turns yellow with the exception of the active tab, that color is the one that I want to change.

Answer

Bootstrap does something really silly to me and puts just about all of the actual styling on the <a> tag in the navigation, instead of the <li> like most people would do. You should change most styles on .active a instead of just .active

.active a {

  background-color: green !important;

}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_navbar">
        <span class="fa fa-bars"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
    <div class="collapse navbar-collapse" id="main_navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Menu 1</a>
        </li>
        <li><a href="#">Menu 2</a>
        </li>
        <li><a href="#">Menu 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Comments