Change Collapse breakpoint in Bootstrap 3.0

Question

Please help me on changing when my nav-bar be collapsed or if there is any method to make it responsive like getting in small size!

that\'s my code:

Answer 1

The collapse can prove troublesome if you have a wide menu bar. You need to edit the media queries inside the bootstrap.css file. This can be found

@media (min-width: XXpx) {
  .navbar-header {
    float: left;
  }
}

You should change this and some other under this such as .collapse to perfect it's responsiveness to your website. Also, your HTML is fine, but this doesn't really affect it.

Answer 2

Some answers to this question claim you can override the bootstrap CSS changes without transpiling the LESS into CSS (using Grunt or some other transpiler). The diff below shows the changes which you would need to make manually in order to simply change @grid-float-breakpoint from @screen-sm-min (the default) to @screen-lg-min.

There are too many changes to do manually - all these CSS changes for one variable! Better just transpile the LESS using Grunt and do it right.

Or use the twitter service to generate a file if you don't want to set up Grunt: http://getbootstrap.com/customize/

diff --git a/node_modules/bootstrap/dist/css/bootstrap.css b/node_modules/bootstrap/dist/css/bootstrap.css
index 66bf005..09bdb1c 100644
--- a/node_modules/bootstrap/dist/css/bootstrap.css
+++ b/node_modules/bootstrap/dist/css/bootstrap.css
@@ -1886,7 +1886,7 @@ dd
 {
     margin-left: 0;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .dl-horizontal dt
     {
@@ -4816,7 +4816,7 @@ tbody.collapse.in

     margin-bottom: 2px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-right .dropdown-menu
     {
@@ -5516,14 +5516,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn

     border: 1px solid transparent;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar
     {
         border-radius: 4px;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-header
     {
@@ -5547,7 +5547,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
 {
     overflow-y: auto;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-collapse
     {
@@ -5598,7 +5598,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     margin-right: -15px;
     margin-left: -15px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .container > .navbar-header,
     .container-fluid > .navbar-header,
@@ -5615,7 +5615,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn

     border-width: 0 0 1px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-static-top
     {
@@ -5630,7 +5630,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     right: 0;
     left: 0;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-fixed-top,
     .navbar-fixed-bottom
@@ -5671,7 +5671,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
 {
     display: block;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar > .container .navbar-brand,
     .navbar > .container-fluid .navbar-brand
@@ -5712,7 +5712,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
 {
     margin-top: 4px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-toggle
     {
@@ -5730,7 +5730,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     padding-top: 10px;
     padding-bottom: 10px;
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-nav .open .dropdown-menu
     {
@@ -5761,7 +5761,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         background-image: none;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-nav
     {
@@ -5863,7 +5863,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         top: 0;
     }
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-form .form-group
     {
@@ -5874,7 +5874,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         margin-bottom: 0;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-form
     {
@@ -5925,7 +5925,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     margin-top: 15px;
     margin-bottom: 15px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-text
     {
@@ -5935,7 +5935,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         margin-left: 15px;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-left
     {
@@ -6020,7 +6020,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     color: #555;
     background-color: #e7e7e7;
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-default .navbar-nav .open .dropdown-menu > li > a
     {
@@ -6139,7 +6139,7 @@ fieldset[disabled] .navbar-default .btn-link:focus
     color: #fff;
     background-color: #080808;
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header
     {

Answer 3

For those who might need it, this is what I did.

@media only screen and (min-width: 500px) {
    .collapse {
        display: block;
    }

    .navbar-header {
        display: none;
    }
}

@media only screen and (max-width: 500px) {
     .collapse {
        display: none;
     }

     .navbar-header {
        display: block;
     }
}

So what I did was to hide the toggle mobile button and still display my menu on that specific width and vice-versa when the width is less than 500px.

Answer 4

For those looking in SASS,

Just ensure you have the override of the "$grid-float-breakpoint" before your bootstrap import.

$grid-float-breakpoint: 992px;

Is How I changed mine.

Answer 5

There are numerous things to change the collapse breakpoint in the css, you would need a VERY good handle on mobile first responsive design to do it OR use the LESS, but the fastest way is to visit:

http://getbootstrap.com/customize/

And enter the breakpoint that you want in the @grid-float-breakpoint field. The choices are the Media queries breakpoints listed @screen-sm-min is where it defaults, it used to default at the @screen-md-min (or thereabouts) in 2.x.

Also read the docs and use the examples as starting points. None of the implementations of the navbar are contained in column classes as those are used inside .rows and there's supposed to be .container directly inside the navbar.

Answer 6

If your using Less go to the variables. Less file and change the following variable from:

//** Point at which the navbar becomes uncollapsed.

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

to:

@grid-float-breakpoint:     @screen-md;

That would make the collapsing nav work on portrait tablet size down.