Bootstrap navbar control collapsing

Question

I have a long navbar for desktop view. When I resize the browser to small size, the navbar items brakes lines. Before Bootstrap collapse it, it size gets to 3 lines. Its looks very ugly like that.

There is a way to control when Bootstrap will show collapse nanbar in JS?

Answer 1

From Bootstrap Documentation:

Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

Answer 2

If you are using the less files, you can change the variables in variable.less:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

Otherwise, you can add a new media query.