Question

I’ve started using Twitter Bootstrap, and have implemented a responsive nav that changes to a foldable menu if viewed in on a mobile (or shrinking the browser windows width).

This is how it looks right now:

What I want is the menu items to be listed under each other left of the login form, instead of horisontal as it is now. Is there an easy way to do this with Twitter Bootstrap?

Here’s my nav code: (I haven’t changed the original css):

    <div class='navbar'>
      <div class='navbar-inner'>
        <div class='container-fluid'>
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class='brand'>Test</a>
        <ul class='nav nav-collapse collapse'>
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
            <li><a>Item 2</a></li>
            <li><a>Item 2</a></li>
        </ul>
        <ul class='nav nav-collapse collapse pull-right'>
            <li class=""><form class="navbar-search">
            <input type="text" class="span2" placeholder="Login">
            <input type="text" class="span2" placeholder="Password">
            <input type="submit" value="Login" class="btn"/>
        </form></li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

Since the LI‘s are probably floated or defined as inline-block, you need to change their CSS rule to clear:both or display:block respectively. Then you need to float the entire menu to the left, and the login form to the right.

You can make those changes responding to the resize event, using JQuery’s css method