Prevent menu from collapsing in 768px display CSS media query

Question

I am trying to do a site using twitter bootstrap. I am having relatively less menus, so it kind of fits within the 768px display also. But in bootstrap by default, the menu collapses using media queries. I am not able to prevent this behavior.

This is my html

<div class="row">
    <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
    <div class="span9">

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
         <a 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>
          </a>
              <div class="nav-collapse">
                <ul class="nav nav-pills">
                  <li><a href="#">Home</a> </li>
                  <li><a href="#">Services</a> </li>
                  <li><a href="#">Portfolio</a> </li>
                  <li><a href="#">Contact Us</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>



    </div>
    </div>

I know it has something to do with the media query in bootstrap, but not able to understand.

Answer 1

You'll want to read up the section: Using the media queries at the bootstrap site: http://getbootstrap.com/2.3.2/scaffolding.html#responsive (Bootstrap 2.3.2) http://getbootstrap.com/getting-started/#disable-responsive (Bootstrap 3)

You'll want to use the relevant media queries to override the styles bootstrap adds when your viewport shrinks.

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

If you don't want the navbar to collapse, remove the 'collapse' from the class name. You should probably get rid of:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

In short, have a look over the docs, there's a section covering this exact thing titled 'Optional responsive variation' here: http://getbootstrap.com/2.3.2/components.html#navbar (Bootstrap 2.3.2)