bootstrap nav push-left / push-right

Question

I need to have one part of my horizontal menu/navigation floating left, and other floating right.

Like this:
Option1_Option2____Option3_Option4_____________Option5_Option6

I am using this technique:

<ul class="nav navbar-nav pull-left">
  <li><a href="#">Option1</a></li>
  <li><a href="#">Option2</a></li>
  <li><a href="#">Option3</a></li>
  <li><a href="#">Option4</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
  <li><a href="#">Option5</a></li>
  <li><a href="#">Option6</a></li>
</ul>

but since the floats are (has to be)!importantI am having problems when the menu collapses on smaller (tablet/mobile) screen sizes.
It ends up being like this:

Option1
Option2
Option3
Option4
  Option5
  Option6

As you can see the two last needs to be floated to the left, so I have tried changing the .pull-right {float: right !important;} to .pull-right {float: left !important;} in the @media queries but no luck... I am stuck. Is there any way to over-ride!important in the @media queries, or any other way to address this issue?

Answer 1

Are you wrapping your uls in a <div class="nav-collapse collapse"> ? your code seems to work just fine for me. See here -> jsFiddle

If you watch the computed styles of the .pull-right ul when collapsing the nav-bar you can see bootstrap changes the float from right to none.

This it directly from bootstrap.css....

@media (max-width: 979px)
  .navbar .nav-collapse .nav.pull-right {
      float: none;
      margin-left: 0;
   }

I am betting you have some conflicting CSS that is messing it up. Remove any custom .pull-right CSS you have, or any custom CSS for the entire navbar...