esafwan esafwan - 6 months ago 34
CSS Question

Prevent menu from collapsing in 768px display CSS media query

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.

The menu when not collapsed

Then menu collapses ones width less than 768px

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

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)

Comments