Note that there are some explanatory texts on larger screens.

plurals
  1. POTwo Responsive Nav bar in Bootsrap Page Conflicts
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload