title: Bootstrap 3 - Navbar with two collapse menus
body: <p>How can I use two navbar-toggle menus next to each other? If I click on the first icon it will open normally but if I click on the second icon, the first one doesn't close.</p>
  
  <p><strong><a href="https://jsfiddle.net/brunodd/DTcHh/9264/" rel="nofollow">Here is what I am trying to do</a></strong></p>
  
  <pre><code>&lt;nav class="navbar-blue" role="navigation"&gt;
          &lt;div class="container"&gt;
              &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
              &lt;div class="navbar-header navbar-default"&gt;
                  &lt;button type="button" class="navbar-toggle navbar-user" data-toggle="collapse" data-target="#navbar-collapse-2"&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 navbar-menu" data-toggle="collapse" data-target="#navbar-collapse-1"&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="#"&gt;
                      Logo goes here
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
              &lt;div class="collapse navbar-collapse navbar-default" id="navbar-collapse-1"&gt;
                  &lt;ul class="nav navbar-nav client-nav navbar-right"&gt;
                      &lt;li&gt;
                          &lt;a class="active" href="#"&gt;My Projects&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Search&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Post Project&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="hidden-xs"&gt;
                          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="fa fa-user"&gt;&lt;/span&gt;&lt;span class="fa fa-sort-desc"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu client-dropdown"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Account Settings&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Sign Out&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;!-- User menu to show on screens &lt; 768px --&gt;
              &lt;div class="collapse navbar-collapse navbar-default" id="navbar-collapse-2"&gt;
                  &lt;ul class="nav navbar-nav client-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Account Settings&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sign Out&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!-- /.navbar-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.container --&gt;
      &lt;/nav&gt;
  </code></pre>