change the default color of .active tab bootstrap
<p>I want to change the color of the active tab on my navbar, I'm using bootstrap, here's my code:</p>

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

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

<pre><code>.active {
  background-color: green !important;
}
</code></pre>

<p>also like this(javascript file):</p>

<pre><code>$(document).ready(function() {
  $('.active').css("background-color", "green");
});
</code></pre>

<p>EDIT:</p>

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

<p>if I add this to my css file:</p>

<pre><code>.navbar {
  background-color: yellow;

}
</code></pre>

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