Bootstrap default navbar is not collapsed in mobile view
<p>So I am new to bootstrap and can't seem to find a solution to fix my problem which is when the mobile view the menu is open when I want it to be collapsed by default.</p>

<pre><code>&lt;div class="navbar navbar-default navbar-fixed-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=".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;/div&gt;
      &lt;div class="navbar-collapse collpase"&gt;
      &lt;ul class="nav navbar-nav navbar-left"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;News &amp; Events&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
          &lt;a href="#" class ="dropdown-toggle" data-toggle="dropdown"&gt;Things to do&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Leisure&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Groups &amp; Activities &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;/li&gt;    
              &lt;/ul&gt;      

          &lt;/li&gt;
           &lt;li class="dropdown"&gt;
          &lt;a href="#" class ="dropdown-toggle" data-toggle="dropdown"&gt;Services&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Education &amp; Learning&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Personal Care&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Police&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;/li&gt;    
              &lt;/ul&gt;      

          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Businesses&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Discussion Forum&lt;/a&gt;&lt;/li&gt;



          &lt;/ul&gt;

      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p><a href="http://i.stack.imgur.com/PXGMD.png" rel="nofollow">Example screenshot</a></p>