Disable Bootstrap 3 navbar going 2 rows in medium viewport size

Question

My Bootstrap 3 navbar is 1 row on a large viewport. Then when I start to shrink the browser window, it switches to 2 row, where the right content ("Hello username", "Log off") is in the second row.

Then after more resize, it becomes 1 row again with the menu items disappeared and the menu button present only.

How can I skip the 2 row phase?

question from:https://stackoverflow.com/questions/20012665/disable-bootstrap-3-navbar-going-2-rows-in-medium-viewport-size

Answer 1

The point (screen width) between the collapsed navbar, menu button only and the horizontal 2 or 1 row navbar is defined by the grid-float-breakpoint.

Set this value to a higher value, default value is 768px will skip the 2 row fase. Try 992px, the boundary of the medium grid.

To change grid-float-breakpoint you will have two option:

• download the source from github, change @grid-float-breakpoint in variables.less and recompile bootstrap
• use the customizer and download you own copy

See also: https://stackoverflow.com/a/18944192/1596547

UPDATE

by cvrebert on https://github.com/twbs/bootstrap/issues/11539#issuecomment-28805244:

Your options are:

• change the grid float breakpoint so that the navbar stays collapsed until the screen is wide enough for your big navbar
• use responsive utility classes to hide some parts of the navbar at narrower screen widths so that it fits at those widths
• rework your navbar items so that they're shorter / less verbose