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

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.