javascript - 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.

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.

Share Improve this question edited May 30, 2016 at 22:52 asked May 30, 2016 at 21:02 Laxus 731 gold badge1 silver badge5 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 9

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./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>

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - change the default color of .active tab bootstrap - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)