Question

I’m using Twitter Bootstrap 2.0.1 in a Rails 3.1.2 project, implemented with bootstrap-sass. I’m loading both the bootstrap.css and the bootstrap-responsive.css files, as well as the bootstrap-collapse.js Javascript.

I have a fluid layout with a navbar similar to the example. This follows the navbar “responsive variation” instructions here. It works fine: if the page is narrower than about 940px, the navbar collapses and displays a “button” that I can click on to expand.

However my navbar looks good down to about 550px wide, i.e. it doesn’t need to be collapsed unless the screen is very narrow.

How do I tell Bootstrap to only collapse the navbar if the screen is less than 550px wide?

Note that at this point I do not want to modify the other responsive behaviors, e.g. stacking elements instead of displaying them side by side.

Answer 1

You are looking for line 239 of bootstrap-responsive.css

@media (max-width: 979px) {...}

Where the max-width value triggers the responsive nav. Change it to 550px or so and it should resize fine.