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?

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

Answer 2

For what it is worth, here is an idea that makes the navbar items morph from text to an icon based on the current responsive size.

<li><a href="#contact"><div class="hidden-sm">Contact<b class="caret"></b></div><span class="glyphicon glyphicon-plus visible-sm"></span></a></li>

The result is the 'Contact' text converts into a plus icon at small size. Here's a bootply example

Answer 3

An alternative solution which does not involve recompiling bootstrap is adding the following to your css:

@media (max-width: 950px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

EDIT about how this works: this instructs the browser to collapse the navbar into a navicon if the media is smaller than some pixel width. You need to set the pixel width appropriately to avoid getting a 2 line navbar. I use this for my website navbar, which I only need to work on chrome/ipad/iphone/samsung mobile. This is arguably a hack but it is simple and easy to test.

Answer 4

Found a simpler way of reducing the nav bar taking hint from another answer posted somewhere, using white-space:nowrap. Here is what worked well:

<div class="container-fluid">
    <div class="collapse navbar-collapse navbar-ex1-collapse" style="width:100%;float:none;position:relative;">
        <ul class="nav navbar-pills nav-justified" role="navigation" style="width:auto;white-space: nowrap;">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                </ul>
            </li> ...
           </ul>
      </div>
</div>

Answer 5

You can simply customize the numbers for different setups in _variables.scss bootstrap files. There are different ways you can do this depending on which way you're getting bootstrap library.

1. If you're getting it using bootstrap URL then you would have to download it, edit it, and include it to your assets (because you're customizing you need to link to local bootstrap)
2. If you're using some sort of automation for task running (e.g. grunt, gulp) they all have string replace task in which you can simply edit library files by executing a task.

Answer 6

Easiest way. Worked for me. Sass way

.navbar-nav>li float: left .navbar-header float: left .navbar-right float: right!important