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?

score 30 · Answer 1 · answered Jan 30 '14 at 19:35

30

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

answered Jan 30 '14 at 19:35

daryl

1,190
10
19

Good idea. I couldn't find any better answer. – hamidfzm Jul 22 '14 at 17:44
I have found this to be really effective. – Golu Jul 25 '15 at 22:46
1

This is a fantastic idea! Of course as long as the icons are "descriptive" enough – Chris Knight Feb 05 '16 at 18:51
Clever. Works great. – Raff Jun 07 '16 at 14:49

score 21 · Accepted Answer · edited May 23 '17 at 12:02

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

This answer resolved the same issue for me, it should be accepted. — anasaitali, Mar 10 '14 at 12:15

Sebapi · Answer 3 · 2017-12-06T15:54:37.590

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.

Maybe you can add a bit of an explanation on what it does? Maybe even provide a JSFiddle? — Luke, Dec 25 '16 at 00:22
Works for me with Bootstrap 3.3.7. However, for standard Bootstrap you need a breakpoint of 991 -> @media (max-width: 991px) { — stefan, Apr 03 '17 at 14:53
Works for me, would like to see some explanation with the code — John Naegle, Oct 03 '17 at 20:17

score 0 · Answer 4 · edited Feb 17 '14 at 19:27

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>

score 0 · Answer 5 · answered Mar 06 '18 at 15:22

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.

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)
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.

score 0 · Answer 6 · answered Apr 28 '18 at 11:35

0

Easiest way. Worked for me. Sass way

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

answered Apr 28 '18 at 11:35

Nagibaba

4,218
1
35
43

Disable Bootstrap 3 navbar going 2 rows in medium viewport size

6 Answers6

Linked

Related