Make Bootstrap 3.0 NavBar content always collapsed

Question

I need to make a section of a NavBar of Bootstrap 3.0 always collapsed.

Actual sections of the navbar:

• Links
• Search Form
• Login Form

Answer 1

Based on @cfx answer, overriding variable grid-float-breakpoint (which I prefer) using SASS:

$grid-float-breakpoint:     999999999px;

Answer 2

You have to override some css to make it stay collapsed

http://jsbin.com/UpeZazi/1/edit

In this example i made the "user login" button stay collapsed.

css:

@media (min-width: 768px) {
  #login-btn {
    display: block;
  }

  #sesion.collapse {
    display: none !important;
  }
}

html:

basically the same except i added the id login-btn to your login user button element:

<button type="button" id="login-btn" class="navbar-toggle boton" data-toggle="collapse" data-target="#sesion">
    <span class="glyphicon glyphicon-user"></span>
 </button>

Answer 3

Case you can't change the less variables, you can also override the bootstrap classes after 768px(smartphone bounder). Bellow is the working code that overrides basic navbars with dropdown menus. Not all classes are overriden bellow, so depending on what you are using, you may need to override other classes.

    @media (min-width: 768px){
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

click here for the live demo code

Answer 4

For those using LESS, head to variables.less and change:

@grid-float-breakpoint:     @screen-sm-min;

to:

@grid-float-breakpoint:     999999999px;

One line change that works like a charm. Just be sure to use an unrealistically large number of pixels (em did not work for me).

Answer 5

Try this:

.navbar-toggle {
    display: block;
}

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