title: Bootstrap navbar active class not working
body: <p>I'm trying to get the active class to work with my Bootstrap navbar but it's not working (I'm assuming because I've made too many CSS changes to the nav class).</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;&lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"&gt;
      &lt;link href="css/base.css" type="text/css" rel="stylesheet"&gt;
      &lt;script src="js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-1.9.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;style&gt;
      #nav {
        white-space: nowrap;
        width: 100%;
        float: left;
        margin-left: auto;
        margin-right: auto;
        margin-bottom:10px;
        display: inline;
        padding: 0;
        background-color: #FFFFFF;
        border-bottom: thin solid #000099;
        padding-bottom: 4px;
        text-align: center;   
      }
      #nav ul {
        list-style: none;
        width: 100%;
        margin: 0 auto;
        display: inline-block;
        vertical-align: top;
        padding: 0; 
      }
      #nav li {
        display: inline-block
      }
      #nav li a {
        display: block;
        padding: 8px 15px;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        color: #424245;
        border-right: 1px solid #ccc; 
      }
      #nav li:last-child a {
        border-right:none; 
      }
  
  &lt;/style&gt;
  &lt;div id="nav"&gt;
      &lt;ul&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Find It Myself&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="ask_the_community.html"&gt;Ask The Community&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="get_help.html"&gt;Get Help&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Codepen <a href="http://codepen.io/anon/pen/NGbEgz" rel="nofollow noreferrer">here</a>. The active class is doing nothing. On top of that I'd like to make the active class to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/T4DI0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T4DI0.png" alt="navbar"></a></p>
  
  <p>Blue bar below instead of the standard darker-gray background that Bootstrap has. I'd settle for just the dark gray background but would like suggestions for how to accomplish the blue bar.</p>
  
  <p>Thanks.</p>