Change the default responsive navbar breakpoint

Question

is there a way to change the breakpoint where Bootstrap menu becomes responsive and collapse? 979px is far too big for me and I would like the transformation taking place only on smaller sizes.

Answer 1

Yes, you can do it by redefining @navbarCollapseWidth variable in less/variables.less file. And recompiling css after that.

Compiling instructions can be found in Compiling Bootstrap with Less section of official documentation.

Answer 2

@nick-kugaevsky the 'compiling bootstrap with less' - link is broken.

BTW, for bootstrap 3 RC 1, you will want to modify the following property in less/variables.less

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-phone;      // here i allready changed it

BTW: this only prohibits the responsive nav to collapse when width > @screen-phone for example. Here is some more info on compiling bootstrap with less: http://bootstrap.lesscss.ru/less.html

You have to download bootstrap, point your app or the node js util to the bootstrap directory containing the less files, modify less/variables and recompile the bootstrap.less file.

Argh, just found out it this is written in the bootstrap documentation: http://getbootstrap.com/components/#navbar