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

find variable:

@grid-float-breakpoint

which is set to @screen-sm, you can change it according to your needs.

If you override the vendor less file, set the variable to 0px, eg:

@grid-float-breakpoint: 0px;

Answer 2

Reading the answers, I believe you are talking about Bootstrap version 2. Maybe someone looking for an answer for Bootstrap 3 will arrive here. This answer is for you!

1. Go to Bootstrap customization page
2. redefine the @grid-float-breakpoint value for something hardcoded (e.g. 520px) or for a smaller screen size like @screen-xs-min
3. Press the button at the bottom of the page to recompile the css files
4. substitute your bootstrap.css and bootstrap-min.css files with the ones from the downloaded zip file.

Answer 3

This worked well for me:

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}