title: Multiple color bootstrap navbar
body: <p>What I want to do is get multiple colors in the navbar?
  Currently the bar as is shown 
  <img src="https://i.stack.imgur.com/jrn6j.png" alt="enter image description here"></p>
  
  <ol>
  <li>Navbar<br/></li>
  <li>Logo<br/></li>
  <li>Navbar<br/></li>
  </ol>
  
  <p>Except I can only seem to get one color
  <br/>
  Here is the link to the code I currently have: <a href="http://jsfiddle.net/ju47nkgu/" rel="nofollow noreferrer">http://jsfiddle.net/ju47nkgu/</a></p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-static-top" role="navigation"&gt;
  &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;/div&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/dealers"&gt;Dealers&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/about"&gt;About&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/contact"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;br&gt;
      &lt;div class="col-lg-5 col-xs-10 col-centered"&gt;
          &lt;a href="/"&gt;
          &lt;img class="img-responsive" src="http://i.imgur.com/FL53zwz.png"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse navbar-small yellow" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;Building/&lt;br&gt;Trade&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;Bandsaws&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;Automotive&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;Dust/&lt;br&gt;Vacuums&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;Planers/&lt;br&gt;Thicknessers&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;Routers/&lt;br&gt;Morticers&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;Sanders/&lt;br&gt;Grinders&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;Table saws&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;Woodlathes&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;DIY&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And here is the CSS</p>
  
  <pre><code>body{
    margin-top: 50px;
  }
  
  @media (min-width: 768px) {
      .navbar .navbar-nav {
          display: inline-block;
          float: none;
      }
  
      .navbar .navbar-collapse {
          text-align: center;
      }
  }    
  
  
  .divide-nav{
    height: 50px;
    background-color: #428bca;
  }
  
  .divide-text{
      color:#fff;
      line-height: 20px;
      font-size:20px;
      padding: 15px 0;
  }
  
  .affix {
    top: 50px;
    width:100%;
  }
  
  .filler{
    min-height: 2000px;
  }
  
  .navbar-form {
     padding-left: 0;
  }
  
  .navbar-collapse{
     padding-left:0; 
  }
  .col-centered{
      float: none;
      margin: 0 auto;
  }
  </code></pre>