90

This is my simple navbar:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png"/>
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

I just would like to prevent this to collapse, cause I don't need it, how to do?

I would like to avoid writing 300K lines of CSS for overriding the default styles.

Any suggestion?

Omiod
  • 10,106
  • 9
  • 49
  • 57
itsme
  • 45,343
  • 90
  • 210
  • 334

6 Answers6

138

After close examining, not 300k lines but there are around 3-4 CSS properties that you need to override:

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

And with this your menu won't collapse.

DEMO (jsfiddle)

EXPLANATION

The four CSS properties do the respective:

  1. The default .collapse property in bootstrap hides the right-side of the menu for tablets(landscape) and phones and instead a toggle button is displayed to hide/show it. Thus this property overrides the default and persistently shows those elements.

  2. For the right-side menu to appear on the same line along with the left-side, we need the left-side to be floating left.

  3. This property is present by default in bootstrap but not on tablet(portrait) to phone resolution. You can skip this one, it's likely to not affect your overall navbar.

  4. This keeps the right-side menu to the right while the inner elements (li) will follow the property 2. So we have left-side float left and right-side float right which brings them into one line.

Yves M.
  • 26,153
  • 20
  • 93
  • 125
AyB
  • 11,136
  • 4
  • 29
  • 46
  • I used just the 2nd and 4th css stanzas. Keeping or removing the 3rd stanza doesn't seem to change anything. The 1st stanza I don't need because I simply don't apply navbar-collapse or collapse. Why apply them and them when you don't want it to collapse? – ahnbizcad Oct 01 '14 at 07:04
  • 2
    @gwho Just added an explanation to the answer. – AyB Oct 01 '14 at 07:37
  • 1
    If it gets skinny enough, the floated left and floated right elements can wrap on each other (im talking about the `ul`s not the `li`s). Whats tue best way to prevent even this from happening? – ahnbizcad Oct 03 '14 at 10:43
  • 2
    If your only requirement is to prevent the UL/LI list becoming vertical, the 2nd CSS is all that is needed. – JamesB Nov 09 '14 at 15:40
  • 1
    The `!important` statements are not necessary here, for me it works without. Try to avoid them whenever possible (!important). – Tim-Erwin Oct 12 '15 at 15:24
  • 1
    this can be further improved by prefixing mentioned rules with a mix-in class, say .navbar-flat, so that behavior can be changed dynamically by appending mix-in class to nav container – Vasily Liaskovsky Oct 26 '15 at 12:27
  • 1
    Works fine BUT dropdowns look terrible with low resolutions – Roubi Jan 13 '17 at 19:12
  • 2
    @ICanHasKittenz Dropdowns still change behaviour when < 768 px, they're displayed in the nav-bar (collapsed beahviour) inside of appearing in a floated white box (non-collapsed behaviour) as one would expect. And the dropdown title widens when clicked, forcing other elements to shift. Just add a dropdown in a navbar element and you'll see it by yourself. – Roubi Jan 15 '17 at 13:42
  • I just wanted to say, I have been fighting with this for a couple hours and this saved my bacon! – Ryan Wilson Apr 11 '18 at 18:01
24

The nabvar will collapse on small devices. The point of collapsing is defined by @grid-float-breakpoint in variables. By default this will by before 768px. For screens below the 768 pixels screen width, the navbar will look like:

enter image description here

It's possible to change the @grid-float-breakpoint in variables.less and recompile Bootstrap. When doing this you also will have to change @screen-xs-max in navbar.less. You will have to set this value to your new @grid-float-breakpoint -1. See also: https://github.com/twbs/bootstrap/pull/10465. This is needed to change navbar forms and dropdowns at the @grid-float-breakpoint to their mobile version too.

Easiest way is to customize bootstrap

find variable:

 @grid-float-breakpoint

which is set to @screen-sm, you can change it according to your needs. Hope it helps!

For SAAS Users

add your custom variables like $grid-float-breakpoint: 0px; before the @import "bootstrap.scss";

Community
  • 1
  • 1
Gagan Gami
  • 9,632
  • 1
  • 25
  • 48
  • 4
    this is really helpfull unfortunately i'm using the bootstrap CDN so i'm unable to customize the bootstrap main file, any tip on how to do this in a separated css file? – itsme May 08 '14 at 07:43
  • 2
    +1 for the @grid-float-breakpoint-variable on the bootstrap customization page, that did the trick for me! – Wietse Jun 02 '15 at 09:23
  • 4
    For SASS users: just add your custom variables like `$grid-float-breakpoint: 0px;` before the `@import "bootstrap.scss";` line – Duvrai Feb 26 '16 at 15:37
5

Here's an approach that leaves the default collapse behavior unchanged while allowing a new section of navigation to always remain visible. Its an augmentation of navbar; navbar-header-menu is a CSS class I have created and is not part of Bootstrap proper.

Place this in the navbar-header element after navbar-brand:

<div class="navbar-header-menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">I'm always visible</a></li>
    </ul>
    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

Add this CSS:

.navbar-header-menu {
    float: left;
}

    .navbar-header-menu > .navbar-nav {
        float: left;
        margin: 0;
    }

        .navbar-header-menu > .navbar-nav > li {
            float: left;
        }

            .navbar-header-menu > .navbar-nav > li > a {
                padding-top: 15px;
                padding-bottom: 15px;
            }

        .navbar-header-menu > .navbar-nav .open .dropdown-menu {
            position: absolute;
            float: left;
            width: auto;
            margin-top: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,.15);
            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
        }

    .navbar-header-menu > .navbar-form {
        float: left;
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-header-menu > .navbar-form > .form-group {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
        }

    .navbar-header-menu > .navbar-left {
        float: left;
    }

    .navbar-header-menu > .navbar-right {
        float: right !important;
    }

    .navbar-header-menu > *.navbar-right:last-child {
        margin-right: -15px !important;
    }

Check the fiddle: http://jsfiddle.net/L2txunqo/

Caveat: navbar-right can be used to sort elements visually but is not guaranteed to pull the element to the furthest right portion of the screen. The fiddle demonstrates that behavior with the navbar-form.

Jeremy Cook
  • 17,434
  • 9
  • 66
  • 71
0

If you're not using the less version, here is the line you need to change:

@media (max-width: 767px) { /* Change this to 0 */
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
Michael Ribbons
  • 1,170
  • 1
  • 12
  • 22
0

The following solution worked for me in Bootstrap 3.3.4:

CSS:

/*no collapse*/

.navbar-collapse.collapse.off {
    display: block!important;
}
.navbar-collapse.collapse.off ul {
    margin: 0;
    padding: 0;
}

.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
    float: left !important;
}

.navbar-right.no-collapse {
    float: right!important;
}

then add the .no-collapse class to each of the lists and the .off class to the main container. Here is an example written in jade:

nav.navbar.navbar-default.navbar-fixed-top
        .container-fluid
            .collapse.navbar-collapse.off
                ul.nav.navbar-nav.no-collapse
                    li
                        a(href='#' class='glyph')
                            i(class='glyphicon glyphicon-info-sign')
                ul.nav.navbar-nav.navbar-right.no-collapse
                    li.dropdown
                        a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
                            | Tools
                            span.caret
                        ul.dropdown-menu(role='menu')
                            li
                                a(href='#') Tool #1
                    li
                        a(href='#')
                            | Logout
NJL9
  • 3
  • 2
Cristi Draghici
  • 480
  • 6
  • 9
0

Another way is to simply remove collapse navbar-collapse from the markup. Example with Bootstrap 3.3.7

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-atp">
  <div class="container-fluid">
    <div class="">
      <ul class="nav navbar-nav nav-custom">
        <li>
          <a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>Nav item</li>
      </ul>
    </div>
  </div>
</nav>
digout
  • 2,736
  • 25
  • 32