How to make bootstrap 3 navbar not wrap

Question

I have a bootstrap 3 navbar.

<div class="navbar navbar-inverse no-print">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/portal/home/index/">Logo of Site</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="/portal/home/index/">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Menu Processes<span class="caret"></span></a>

            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Enquiries<span class="caret"></span></a>

            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin Reports <span class="caret"></span></a>

            </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">System Maintenance<span class="caret"></span></a>      
                </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
              <a>Change password</a> 

            </li>
            <li>
                <a href="#">Welcome  Firstname Lastname</a>
            </li>
            <li>
                <a href="#">Log Out</a>
            </li>
        </ul>
    </div>
</div>

When the width of the window is full desktop size it is correct.

When the width of the window is smaller mobile phone size it correct.

In between these two sizes it wraps this menu as well as doubling the menu's height which I don't want.

I think my only option is probably to increase the mobile width to increase with inbetween widths so the navbar shows in mobile mode in the screenshot.

What css do I need to achieve this?

How do I force the right navbar <ul> to not be allowed to move below the left navbar <ul>?

possible duplicate of http://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less — SM Ahmed, May 13 '16 at 12:48
Possible duplicate of [Bootstrap 3 Navbar Collapse](http://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse) — vanburen, May 13 '16 at 13:31

Josh Salazar · Accepted Answer · 2016-05-13T13:13:15.953

Try this...

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

From: http://www.bootply.com/120951

score 1 · Answer 2 · answered May 13 '16 at 12:49

By default, the navbar toggles and becomes accessible via the burger menu at viewports <= 767px...

Your best bet (something I do all the time with BS!) is to make is collapse at larger viewports. You can do this with this handy snippet of code.

@media (min-width: 768px) and (max-width: 991px) { /* You can change the max-width to whatever you want... */
    .parent-class .navbar-collapse.collapse {
        display: none;
    }
    .parent-class .navbar-collapse.collapse.in {
        display: block;
    }
    .parent-class .navbar-header .collapse, .navbar-toggle {
        display:block;
    }
    .parent-class .navbar-header {
        float:none;
    }
}

The above is a modified version of another answer on SO from some time ago - I can't find the link to it (I have this snippet lurking on my PC as I use it often).

You'll notice I've prepended .parent-class to the selectors above, this is to ensure these styles override the default BootStrap styles which don't normally get overridden till 767px and below...

where does `parent-class` go, in which div ? pretty hard to guess without you providing the html — joedotnot, Dec 03 '19 at 02:05
@joedotnot any parent element you want it to, it doesn't necessarily matter, the effect will be the same. — David Wilkinson, Dec 03 '19 at 08:51

score 0 · Answer 3 · answered May 13 '16 at 12:47

<ul> is a block level element

you can use all li items in single <ul>

<ul class="nav navbar-nav">
            <li><a href="/portal/home/index/">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Menu Processes<span class="caret"></span></a>

            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Enquiries<span class="caret"></span></a>

            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin Reports <span class="caret"></span></a>

            </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">System Maintenance<span class="caret"></span></a>      
                </li>

            <li>
              <a>Change password</a> 

            </li>
            <li>
                <a href="#">Welcome  Firstname Lastname</a>
            </li>
            <li>
                <a href="#">Log Out</a>
            </li>
        </ul>

Or you can align right and left align both <ul> and set tab view to set 12 columns each so both <ul> look better in tab view

mostly password login etc goes to top bar in a separate div.......so it will not break menu alignment

How to make bootstrap 3 navbar not wrap

3 Answers3

Linked