title: bootstrap change navbar .active background color
body: <p>I have a navbar in which I can't really see the .active color as I am using a 3rd party theme that I really like, but however I have one problem with the theme. I can't properly see which of my navbar items that is currently active. Therefore I want to add a background color to the .active element.</p>
  
  <h1>index.html</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;!-- MOBILE FIRST --&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;!-- BOOTSTRAP --&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;!-- jQuery library --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!-- Latest compiled JavaScript --&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- THEMES --&gt;
    &lt;!-- &lt;link href="css/theme_black.min.css" rel="stylesheet"&gt; --&gt;
    &lt;!-- &lt;link href="css/theme_white.min.css" rel="stylesheet"&gt; --&gt;
  
    &lt;!-- HOMEMADE - these files are local --&gt; 
    &lt;!-- &lt;script src="js/functions.js"&gt;&lt;/script&gt; --&gt;
    &lt;!-- &lt;link href="css/custom_style.css" rel="stylesheet"&gt; --&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header id="header" class="header clearfix no-padding"&gt;
    &lt;nav class="navbar navbar-default navbar-static-top"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;Test&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse no-padding"&gt;
          &lt;ul class="nav navbar-nav pull-right" id="navigator"&gt;
            &lt;li id="home"&gt;&lt;a class="border" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li id="about"&gt;&lt;a class="border" href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li id="cv"&gt;&lt;a class="border" href="#"&gt;CV&lt;/a&gt;&lt;/li&gt;
            &lt;li id="contact"&gt;&lt;a class="border" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I am using the following code in my javascript to change the .active item</p>
  
  <h1>functions.js</h1>
  
  <pre><code>$('#nav li a').click(function() {
    $('#nav li').removeClass();
    $($(this).attr('href')).addClass('active');
  });
  </code></pre>
  
  <p>I do however want to change the background of the active item, and I have tried a couple of different solutions in my css, but none of them work as intended.</p>
  
  <h1>custom_style.css</h1>
  
  <pre><code>.no-margin {
    margin: 0;
  }
  
  .no-padding {
    padding: 0;
  }
  
  //some sort of .active {
  //  background-color: blue;
  //}
  </code></pre>
  
  <h1>EDIT:</h1>
  
  <p>Now with a fiddle: <a href="https://jsfiddle.net/819qbftg/2/" rel="nofollow">https://jsfiddle.net/819qbftg/2/</a></p>