Change navbar collapse width Twitter Bootstrap 3

Question

I am attempting to workout how to modify the collapse width of the navbar within Bootstrap 3 so that it will collapse at an earlier width. I have found several suggestions but none seem to work. The closest I got was the code from this post Twitter Bootstrap 3 navbar-collapse - set width to collapse

Here's what that post used:

@media (max-width: 1280px) {
.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;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

}

This causes the collapse to happen when I want it however, it breaks the collapse at the same time. The collapse button appears when it's supposed to however when I click on it the menu appears for just a second and then automatically closes. Is there a way to stop the auto close?

score 1 · Accepted Answer · answered Mar 10 '14 at 15:06

1

There is a very easy way do do this,

Click here to customize Bootstraps LESS variables
Change @grid-float-breakpoint to the size of your choice
Click compile and download
Use the resulting CSS on your page!

answered Mar 10 '14 at 15:06

SW4

69,876
20
132
137

I've tried using the @grid-float-breakpoint and that doesn't seem to work either. I set it to 1080px, compiled and downloaded it, copied that CSS file over my existing and the issue is still there. – Rhendar Mar 10 '14 at 15:17

Carol Skelly · Answer 2 · 2018-04-07T13:04:07.707

For Bootstrap 3.1, the navbar changed slightly from 3.0, so there are some changes to the CSS you'd use to override the breakpoint..

@media (max-width: 1200px) {
    .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;
    }
}

http://www.bootply.com/120604

Related
https://stackoverflow.com/a/36289507/171456

Change navbar collapse width Twitter Bootstrap 3

2 Answers2