CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcss
Laxus
Laxus

Reputation: 73

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.

Upvotes: 6

Views: 28516

Answers (2)

Brijesh Shukla
Brijesh Shukla

Reputation: 11

CSS is working if we do properly

 <style>
        a.active.nav-link{background-color: #17a2b8!important;}
    </style>

Use this and you will be done. No need of Javascript

Upvotes: 1

Jhecht
Jhecht

Reputation: 4435

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>

Upvotes: 9

Related Questions