title: Bootstrap menu (nav) collapse horizontally instead of vertical
body: <p><img src="https://i.stack.imgur.com/WmANE.gif" alt="enter image description here">i'm using this Html /css for and the menu(bootstrap nav ) and it is always horizontal on a small screen / mobile device. that I want it / need it to be vertical.i'm using bootstrap 3.2 </p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&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="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 href="home/index" class="navbar-brand"&gt;
                  &lt;img src="../../Images/Logo.gif" alt="" class=" left img-rounded img-responsive noborder " /&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse "&gt;
              &lt;ul class="nav navbar-right  nav-pills navbar-right "&gt;
                  &lt;li&gt;@Html.ActionLink("1", "Index", "ContactUs")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("2", "Allpictuers", "Home")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("3", "Index", "Courses")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("4", "Events", "Home")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("5", "OurStafMembers", "Home")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("6", "Index", "Abouts")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("7", "Index", "Home")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("8", "Index", "English")&lt;/li&gt;
                  @*&lt;li&gt;&gt;@Html.ActionLink("Thisis _Layout", "Index", "English")&lt;/li&gt;*@
  
                  @if (User.Identity.IsAuthenticated)
                  {
                      &lt;li&gt;  @Html.Partial("_LoginPartial")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("Admin", "Index", "admin")&lt;/li&gt;
                  }
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>This is the render Html:</p>
  
  <blockquote>
    <p>
            
                
                    
                        
                        /  ...
                    
                    
                        
                    
                
                </p>
  </blockquote>
  
  <pre><code>            &lt;ul class="nav navbar-right  nav-pills "&gt;
                  &lt;li&gt;&lt;a href="/ContactUs"&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/Home/Allpictuers"&gt;2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/Courses"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/Home/Events"&gt;4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/Home/OurStafMembers"&gt;5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/Abouts"&gt;6&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;7&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/English"&gt;8&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>