title: Bootstrap 3 Navbar Collapse menu at Left for left and right navbar items
body: <p>I have a Bootstrap 3 navbar with left nav items and right nav items (as shown below).  </p>
  
  <p><img src="https://i.stack.imgur.com/pCkke.jpg" alt="Left and Right nav items"></p>
  
  <p>When collapsed, I want both the navbar-toggle (AKA the 'hamburger menu') and its items to be left aligned. </p>
  
  <p>My code so far:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default custom-navbar" role="navigation"&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;/div&gt;
    &lt;div class="navbar-collapse collapse"&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Left&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about"&gt;Left&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="nav navbar-nav pull-right"&gt;
        &lt;li&gt;&lt;a href="#about"&gt;Right&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#contact"&gt;Right&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The CSS to have the navbar-toggle on the left is:</p>
  
  <pre class="lang-css prettyprint-override"><code>@media (max-width:767px) {
      .custom-navbar .navbar-right {
          float: right;
          padding-right: 15px;
      }
      .custom-navbar .nav.navbar-nav.navbar-right li {
          float: left;
      }
      .custom-navbar .nav.navbar-nav.navbar-right li &gt; a {
          padding:8px 5px;
      }
      .custom-navbar .navbar-toggle {
          float: left;
          margin-right: 0
      }
      .custom-navbar .navbar-header {
          float: left;
          width: auto!important;
      }
      .custom-navbar .navbar-collapse {
          clear: both;
          float: none;
      }
  }
  </code></pre>
  
  <p>I have added a "pull-right" style to have the items aligned, with no success.</p>
  
  <p>The "navbar-right" works badly. In fact, with it, I will have both right-hand items on the same row. 
  Using "pull-right" they work as single rows, but still stay on the right.</p>
  
  <p>This leaves me with:</p>
  
  <ul>
  <li>The hamburger menu on the left (as desired),</li>
  <li>The navbar-left items on the left (as desired),</li>
  <li>The navbar right items <em>are still on the right</em> (I want this to be fixed!).</li>
  </ul>
  
  <p>The final result:</p>
  
  <p><img src="https://i.stack.imgur.com/Gqtu0.jpg" alt="The last two elements are still on the right"></p>
  
  <p>The code snippet is <a href="http://www.bootply.com/JJOrdaJtoY" rel="nofollow noreferrer">here</a>.</p>