title: Prevent menu from collapsing in 768px display CSS media query
body: <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/fnieH.png" alt="The menu when not collapsed"></p>
  
  <p><img src="https://i.stack.imgur.com/tP8xe.png" alt="Then menu collapses ones width less than 768px"></p>
  
  <p>This is my html</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="span3 logo"&gt;&lt;h1&gt;&lt;img src="img/logo.png" /&gt;&lt;/h1&gt;&lt;/div&gt;
      &lt;div class="span9"&gt;
  
          &lt;div class="navbar"&gt;
            &lt;div class="navbar-inner"&gt;
              &lt;div class="container"&gt;
           &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/a&gt;
                &lt;div class="nav-collapse"&gt;
                  &lt;ul class="nav nav-pills"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt; &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt; &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt; &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  
  
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I know it has something to do with the media query in bootstrap, but not able to understand.</p>