title: Collapsed navbar drop down color
body: <p>I am using bootstrap navbar-fixed-top and have set to always be collapsed.</p>
  
  <p>I would like the color of the drop down to be a different colour to that of the main navbar, a bit like the nag on this site: <a href="http://wearehanno.com/" rel="nofollow">http://wearehanno.com/</a></p>
  
  <p>Any ideas on how to achieve this?</p>
  
  <pre><code> &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&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;a class="navbar-brand" href="&lt;?php echo home_url(); ?&gt;/"&gt;&lt;?php bloginfo('name'); ?&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;nav class="collapse navbar-collapse" role="navigation"&gt;
        &lt;?php
          if (has_nav_menu('primary_navigation')) :
            wp_nav_menu(array('theme_location' =&gt; 'primary_navigation', 'menu_class' =&gt; 'nav navbar-nav'));
          endif;
        ?&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
  .navbar-brand {
    display: block;
    background: url(../img/logo.svg) no-repeat;
    text-indent: -9999px;
    height: 54px;
    width:216px;
    margin-top:10px;
    background-position:center; 
  }
  
  .navbar-collapse { background:#333333; }
  
  @grid-float-breakpoint:     9999px;
  </code></pre>