title: Two Responsive Nav bar in Bootsrap Page Conflicts
body: <p>Using Bootstrap Responsive Framework I have to use two Nav bars in my page. they work fine but in a toggle mode clicking on icon lists both  "nav-collapce" items!</p>
  
  <p>I tried to rename the collapse class name for second class but it didn't work. Can you please let me know how I can run both "nav-collapse collapse two times without any conflict? </p>
  
  <pre><code>&lt;div class="navbar"&gt;
  &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
          &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-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;/a&gt;
          &lt;a class="brand" href="#"&gt;Candete&lt;/a&gt;
          &lt;div class="nav-collapse collapse"&gt;
              &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
              &lt;ul class="nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;All Products&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="navbar"&gt;
  &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
          &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-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;/a&gt;
          &lt;a class="brand" href="#"&gt;Product Category&lt;/a&gt;
          &lt;div class="nav-collapse collapse"&gt;
              &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
              &lt;ul class="nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Gold&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Copper&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Zinc&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Metals&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Other&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>