title: right navigation bar bootstrap does not collapse
body: <p>I am using Bootstrap 3, i am using top navigation bar and left side navigation bar, i want that it should work fine for mobile also, when i collapse the page from right to left then my top navigation works fine and both buttons appears but my left side navigation does not disappear, it appears and disappear on button click.</p>
  
  <p>This is <a href="http://jsfiddle.net/5QWG9/1/" rel="nofollow">jsfiddle</a></p>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;!-- Fixed navbar --&gt;
  &lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container nav-main"&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;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar" role="complementary" &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;span class="navbar-brand"&gt;Business Name Test &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;
                &lt;a href="/Settings"&gt;&lt;span class="glyphicon glyphicon-cog"&gt;&lt;/span&gt; Settings&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="/Help"&gt;&lt;span class="glyphicon glyphicon-question-sign"&gt;&lt;/span&gt; Help&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="/Account/LogOff"&gt;&lt;span class="glyphicon glyphicon-log-out"&gt;&lt;/span&gt; Logout&lt;/a&gt;
  
            &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;div class="container main"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-2 col-sm-2 col-lg-2" id="sidebar" role="complementary" &gt;
                  &lt;div class="m-sidebar"&gt;
  
  &lt;ul class="nav"&gt;
      &lt;li&gt;&lt;a href="#" rel="tooltip" title="Link1"&gt;Link1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" rel="tooltip" title="Link2"&gt;Link2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Messages" rel="tooltip" title="Link3"&gt;Link3&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Inventory" rel="tooltip" title="Link 4"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="/Inventory" rel="tooltip" title="Link 4"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="/Inventory" rel="tooltip" title="Link 4"&gt;Link 6&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="/Inventory" rel="tooltip" title="Link 4"&gt;Link 7&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-10 col-sm-10 col-lg-10"&gt;
      &lt;div class="page-header"&gt;
            &lt;h1&gt;Home Page&lt;/h1&gt;
      &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /container --&gt;
  </code></pre>