How to make bootstrap 3 navbar not wrap


Tags: css,twitter-bootstrap,twitter-bootstrap-3

Problem :

I have a bootstrap 3 navbar.

JSFiddle

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

enter image description here

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>?



Solution :

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


    CSS Howto..

    By CSS, how to make page height not change when an element is moved down

    In a 3 column grid of a varying number of elements, how to select only the elements that appear on the last line using CSS

    How to position an image to the right of a center aligned title with HTML & CSS

    how to make css for work for different mobile sites

    CSS Transition - how to make a text coming from the top side?

    How to stop children from clipping when using dynamic height parents?

    Show bootstrap glyphicon in link when hovering

    How to create a frosted glass effect using CSS?

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    How to create a WoW-like cooldown effect?

    How to dynamically remove all unwanted CSS and JS from page

    How to apply CSS locally on any online page?

    Asp.Net how to apply a css style to all the control of it's kind

    How to add multiple css gradient as a multiple background?

    How should it work if I want a page to have a theme-roller (more or less like the jQuery themeroller)

    How to display a custom css animation with jquery and fall back to just show() if not supported?

    How can I completely centre the “feature” section of my layout (please see links)?

    How to remove curved line in HTML/CSS

    How do I create a class hierarcy in CSS for MVC4 Razor?

    How to inscribe the following shape with CSS inside div?

    How to add threshhold onclick() jQuery?

    How to increase-decrease the number (i.e. 0, 1,4..) size in CSS?

    How to auto-resize tabs to fit a fixed-width container?

    How to use HTML classes and ID's

    How can I change the color CSS property of an element using jQuery

    How to fix transparent div child in parent?

    CSS form with side by side fields…how to align the labels and fields vertically?

    Two navbar-inner on the same page how to change the padding of each?

    How do you override CSS applied by jQuery UI theme properly?

    How to create correct .css for Html.TextBoxFor