title: Second click of bootstrap collapsed menu not re-collapsing the menu
body: <p>When my web page is shown on small devices the menu collapses as expected and when you click on the collapsed menu icon the drop down menu appears, again as expected. However when you click on the icon again the menu does not collapse as it should.</p>
  
  <p>My Bootstrap code looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myNavbar {
      position: relative;
      border:none;
  }
  #myNavbar .nav {
      bottom: 0; 
      right: 0;
      margin-bottom: -10px;
  }
  .navbar-nav.navbar-right:last-child {
      margin-right: 0;
  }
  .navbar-default {
      background:#FFFFFF;
      border-left:none;
      border-right:none;
      border-top:none;
      border-bottom:solid;
      border-bottom-width:2px;
      border-color:#01B6AC;
      width:100% !important;
      margin-right:0px;
      padding-right:0px;
      border-radius: 0 !important;
      -moz-border-radius: 0 !important;
  }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
             &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&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;span class="icon-bar"&gt;&lt;/span&gt;
             &lt;/button&gt;
           &lt;a class="navbar-brand" href="#"&gt;&lt;img class="img-responsive" src="/assets/img/outa.png" width="120px;"/&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
            &lt;ul class="nav navbar-nav pull-right"&gt;
                &lt;li&gt;&lt;a href="/browser/saved/"&gt;Saved searches&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="../index.html"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="../index.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="../index.html"&gt;Sign In&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;     
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone know what I am doing wrong?</p>