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

Answer 1

This example is from the official website: http://getbootstrap.com/examples/non-responsive/

The changes are in non-responsive.css but the important parts pertaining to .navbar are:

body {
    padding-top: 70px;
    padding-bottom: 30px;
}
.page-header {
    margin-bottom: 30px;
}
.page-header .lead {
    margin-bottom: 10px;
}
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}

Answer 2

Here's what I used for bootstrap 3.3.4. It's a hack, but it's also not a 2-day fix redoing the css.

@media (min-width: 768px) and (max-width: 979px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
    display: inline-block !important;
    float: right !important;
  }
}

You may need to tweak the selectors, but basically, make the header full-width, then show and float the button right.

Answer 3

If you want to completely disable the collapsing navbar, add this variable in your custom LESS file:

@grid-float-breakpoint: 0px;

Answer 4

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)

Answer 5

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

Edit

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

Answer 6

If all you want to do is not have the nav collapse until it reaches a smaller value, the simplest way is to head over to the Twitter Bootstrap customization page, change the @navbarCollapseWidth to the value you want, and download the package. Done.

If you want to customize beyond what this page allows, you'll have to override or customize as described in the other answers.