Changing to vertical menu when shrinking browser width

TiteVicle

New Member
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:
E629t.png
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):\[code\] <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="http://stackoverflow.com/questions/13879490/Login" class="btn"/> </form></li> </ul> </div> </div> </div>\[/code\]
 
Back
Top