title: How to left align bootstrap menu items when viewing on small screen?
body: <p>When a toggle button comes up on a small/mobile screen, I want the menu items left aligned as demonstrated upon re-sizing the screen in <a href="http://dbushell.github.io/Responsive-Off-Canvas-Menu/step4.html" rel="nofollow">this example</a>.</p>
  
  <p>Here is my current code. Can anyone help so that the menu items become automatically left aligned when viewed on small/mobile screen (on desktop screen, proportionately justified centered screen is desired)?</p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#mainnavbar"&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;/div&gt;
          &lt;div class="collapse navbar-collapse" id="mainnavbar"&gt;                  
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="aboutus.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>