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


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

Best Solution

You can customize Twitter Bootstrap css compiling it from sass-twitter-bootstrap scss files and setting $navbarCollapseWidth in _variables.scss to your desired value...


As @Accipheran stated in the comments, for Bootstrap 3.x the name of the variable you should set is $grid-float-breakpoint.

Related Question