title: Bootstrap mobile navbar is open on load and won't toggle
body: <p>Hey guys I am a little confused to why my mobile navbar is open on page load and won't toggle.  I have copied the code from my other mobile navbar that I made however I am obviously missing.</p>
  
  <p>Just so you know the navbar only displays for small devices as the navbar for large devices is separate.</p>
  
  <h3><a href="http://jsfiddle.net/DTcHh/608/" rel="nofollow">Here is the fiddle</a></h3>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="navbar navbar-default nav-links navbar-fixed-top hidden-md hidden-lg"&gt;
      &lt;div class="container"&gt;
          &lt;button class="visible-sm visible-xs navbar-toggle" type="button"
                  data-target="#i-want-this-to-collapse" data-toggle="collapse" &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="mini-navbar navbar-brand" href="/"&gt;
              &lt;img src="media/img/nav-logo.png" alt="Driven Car Sales Logo"
                   class="img-rounded logo-nav mini-navbar" /&gt;
          &lt;/a&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="#"&gt;Join us&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                      About&lt;strong class="caret"&gt;&lt;/strong&gt;
                  &lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt; &lt;a href "#"&gt;The Team&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt; &lt;a href "#"&gt;Our Partners&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;How To Find Us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.mini-navbar {
      opacity: 1;
      padding: 5px 0;
  }
  
  @media only screen and (max-width : 992px) {
      /*body {display: none;}*/
      .navbar-nav &gt; li {
          float: none;
      }
      .navbar-nav {
          float: none;
      }
      .nav.navbar-nav {
          clear: both;
          float: left;
          margin: 0 0 0 -15px;
          width: 100%;
      }
      .navbar-default .navbar-nav&gt;li&gt;a {
          border: none;
      }
  
      .navbar-nav &gt; li:last-child {
          border: none;
      }
      .navbar-default {
  
      }
  }
  </code></pre>
  
  <p>Any idea where I am going wrong?</p>