title: Twitter Bootstrap: Stacking Navigation on Mobile
body: <p>I am trying to have a very simple navigation bar in my twitter boostrap template that will simply stack the menu items vertically on mobile (and show children when tapped). Since I'm a newbie at Bootstrap (I'm used to Foundation 3) I used the <a href="http://bootswatch.com/cyborg/" rel="nofollow">Cyborg colorscheme</a> from Bootswatch to jumpstart my development of this site. I have included all the javascript plugins available and jquery in the header.</p>
  
  <p>I am thus far extremely confused by the documentation and would greatly appreciate some help modifying the current menu to function properly on mobile. Thank you!</p>
  
  <pre><code>&lt;div class="navbar"&gt;
    &lt;div class="navbar-inner"&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;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>