CODEWITHSUNDEEP
csstwitter-bootstrapnavigationresponsive-designnav
holyredbeard
holyredbeard

Reputation: 21218

Changing to vertical menu when shrinking browser width

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>

Upvotes: 0

Views: 1350

Answers (2)

hajpoj
hajpoj

Reputation: 13379

Per the twitter bootstrap docs everything that you want hidden and formatted correctly needs to be put within <div class="nav-collapse collapse">{your nav items}</div>

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


    <!-- ALL MY NAVIGATION IN HERE -->
    <div class='nav-collapse collapse'>
        <ul class='nav'>
            <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>            
        <form class="navbar-search pull-right">
            <input type="text" class="span2" placeholder="Login">
            <input type="text" class="span2" placeholder="Password">
            <input type="submit" value="Login" class="btn"/>
        </form>
    </div>
  </div>
</div>
</div>

Just moving your html around without adding any css or javascript will do the trick.:) Here is a jsfiddle for it: http://jsfiddle.net/hajpoj/Z3wqL/3/

Upvotes: 1

Matanya
Matanya

Reputation: 6346

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

Upvotes: 1

Related Questions