title: Float Bootstrap navbar links to the left on mobile and right on desktop
body: <p>My navbar has 4 links all floating to the right. I used <code>.pull-right</code> to make it work. On mobile, I would like every link to move to the left except for my active link. I want my active link to stay right on all devices.</p>
  
  <p>I'm trying to find the most efficient way to do this. Are there any classes within Bootstrap that can help with this or do I need to create a custom class for pulling the 3 links left on mobile?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- Fixed Navbar --&gt;
  &lt;nav class="navbar navbar-custom"&gt;
      &lt;div class="container"&gt;
  
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                  &lt;span class="sr-only"&gt;Toggle Navigation&lt;/span&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;!-- end navbar-header --&gt;
  
          &lt;div id="navbar" class="collapse navbar-collapse pull-right"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="about.html"&gt;About Summit&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="login.html"&gt;Client Login&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
    &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
  
      &lt;/div&gt; &lt;!-- end container --&gt;
  &lt;/nav&gt; &lt;!-- end navbar navbar-custom --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/*======= navbar ========*/
  .navbar {
      opacity: 0.95;
      -webkit-opacity: 0.95;
      -moz-opacity: 0.95;
      filter: alpha(opacity=95); /* internet explorer */
  }
  
  #navbar &gt; ul.nav a:hover {
      color: #50b948; /*TD Green*/
  }
  
  .navbar-custom {
      background-color: #f2f2f2;
      font-family: 'Quicksand', sans-serif;
      font-size: 1rem; /*14px*/
      text-transform: uppercase;
      font-weight: 700;
      border: none;
  }
  .navbar-custom .navbar-brand {
      color: #777;
  }
  .navbar-custom .navbar-brand:hover,
  .navbar-custom .navbar-brand:focus {
      color: #5e5e5e;
      background-color: transparent;
  }
  .navbar-custom .navbar-text {
      color: #777;
  }
  .navbar-custom .navbar-nav &gt; li &gt; a {
      color: #777;
  }
  .navbar-custom .navbar-nav &gt; li &gt; a:hover,
  .navbar-custom .navbar-nav &gt; li &gt; a:focus {
      color: #333;
      background-color: transparent;
  }
  .navbar-custom .navbar-nav &gt; .active &gt; a {
      background: #50b948; 
      color: #FAFAFA; 
  }
  
  .navbar-custom .navbar-nav &gt; .active &gt; a:hover,
  .navbar-custom .navbar-nav &gt; .active &gt; a:focus {
      background: #FAFAFA;
  
      -webkit-box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75);
      -moz-box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75);
      box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75);
  }
  
  .navbar-custom .navbar-nav &gt; .disabled &gt; a,
  .navbar-custom .navbar-nav &gt; .disabled &gt; a:hover,
  .navbar-custom .navbar-nav &gt; .disabled &gt; a:focus {
      color: #ccc;
      background-color: transparent;
  }
  .navbar-custom .navbar-toggle {
      border-color: #ccc; /*btn border-color*/
  }
  .navbar-custom .navbar-toggle:hover,
  .navbar-custom .navbar-toggle:focus {
      background-color: #ddd; /*btn color on hover*/
  }
  .navbar-custom .navbar-toggle .icon-bar {
      background-color: #888;
  }
  .navbar-custom .navbar-collapse,
  .navbar-custom .navbar-form {
      border-color: #ccc; /*collapsed bottom border color*/
  }
  .navbar-custom .navbar-nav &gt; .open &gt; a,
  .navbar-custom .navbar-nav &gt; .open &gt; a:hover,
  .navbar-custom .navbar-nav &gt; .open &gt; a:focus {
      background-color: #e7e7e7;
      color: #555;
  }
  @media (max-width: 767px) {
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; li &gt; a {
        color: #777;
  }
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; li &gt; a:hover,
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; li &gt; a:focus {
        color: #333;
        background-color: transparent;
  }
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; .active &gt; a,
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; .active &gt; a:hover,
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; .active &gt; a:focus {
        color: #555;
        background-color: #e7e7e7;
  }
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; .disabled &gt; a,
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; .disabled &gt; a:hover,
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; .disabled &gt; a:focus {
        color: #ccc;
        background-color: transparent;
    }
  }
    .navbar-custom .navbar-link {
      color: #777;
  }
  .navbar-custom .navbar-link:hover {
      color: #333;
  }
  .navbar-custom .btn-link {
      color: #777;
  }
  .navbar-custom .btn-link:hover,
  .navbar-custom .btn-link:focus {
      color: #333;
  }
  .navbar-custom .btn-link[disabled]:hover,
  fieldset[disabled] .navbar-custom .btn-link:hover,
  .navbar-custom .btn-link[disabled]:focus,
  fieldset[disabled] .navbar-custom .btn-link:focus {
      color: #ccc;
  }
  </code></pre>