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?

Solution

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...

Comments

[no0ne]

My macbook is on its 7th year and is doing some wierd stuff sometimes. I tried everything without success, so in the end I just had to start from scratch... delted everything, restarted computer and downloaded the BS fresh.. now it seems to work.

[no0ne]

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