Twitter bootstrap 3 how to activate navbar-collapse on small devices

By default, the breakpoint is @screen-sm-min (ie ≥768px).

View an Example

Customize the navbar breakpoint

To customize the navbar breakpoint, change the less variable @grid-float-breakpoint.

From the documentation:

Overflowing content

Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

...

c. Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

You can use Bootstrap's customization tool to build a modified version of Bootstrap. From here, you can alter @grid-float-breakpoint to another breakpoint defined by Bootstrap (ie, xs, sm, md, lg) or a set amount (ie 500px).

When you're finished, navigate to the Download section, and click Compile and Download

Edit

Your markup works as expected, as well: http://jsbin.com/kuxah/1/edit?html,output

here is the solution for sassy people

@media(max-width:$screen-sm-max) {
 .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;
}
}