bootstrap nav push-left / push-right

alignment, css, css-float, twitter-bootstrap

Solution

Are you wrapping your `ul`s 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...

Problem

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)`!important`I 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?

Original source