Easiest way to change when Bootstrap navbar collap

Question

I've got a rails app using the bootstrap-sass gem. I'd like to change the width the navbar collapses from tablet (979px) to phone (769px). Overriding a media query isn't a tidy solution.

I've edited @navbarCollapseWidth in variables.less and built bootstrap, then copied the contents bootstrap-responsive.css into responsive.scss in gems...vendor/assets/stylesheets/bootstrap. Now however, I've lost the ability to update the gem without losing my changes.

What's the best method here? I'd like to make what I think is a simple change but keep my gem update-able. Perhaps using @import "bootstrap-responsive-mine"; in application.css.scss then manually updating that file when I need to?

Answer 1

Did you read some info about configuration this gem?

Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables!

@import "bootstrap";

Need to configure a variable or two? Simply define the value of the variable you want to change before importing Bootstrap. Sass will respect your existing definition rather than overwriting it with the Bootstrap defaults.

$navbarCollapseWidth: 769px;
@import "bootstrap";

Or that is not what you need?