bootstrap change navbar .active background color
<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>