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:

    <div style="background-color:#e2e2e2; padding-bottom:10px;">
    </div>

    <div class="container">
        <div class="col-lg-10 col-lg-push-1 onhover">
            <nav class="navbar-default custom-nav" role="navigation">   
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="nav-collapse1" style="padding:0px;">                    
                    <ul class="nav nav-pills onhover">
                        <li class="active"><a class="onhover1" href="#">Home</a></li>
                        <li><a class="onhover1" href="#">Rooms</a></li>
                        <li><a class="onhover1" href="#">Events</a></li>
                        <li><a class="onhover1" href="#">Restraunts</a></li>
                        <li><a class="onhover1" href="#">Gallery</a></li>
                        <li><a class="onhover1" href="#">Services</a></li>
                        <li><a class="onhover1" href="#">About</a></li>
                        <li><a class="onhover1" href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

If you are still struggling, Check Seb33300 answer on this link: http://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse — rFarag, Dec 29 '14 at 13:05
[*Bootstrap: How to collapse navbar earlier*](http://stackoverflow.com/questions/21076922/bootstrap-how-to-collapse-navbar-earlier#answer-26433031) — cptstarling, Jun 03 '16 at 13:15

score 27 · Accepted Answer · answered Dec 28 '13 at 21:28

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/ enter image description here

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.

score 2 · Answer 2 · answered Feb 25 '14 at 15:29

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.

score 2 · Answer 3 · edited Mar 16 '15 at 14:25

2

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.

edited Mar 16 '15 at 14:25

Opal

70,085
21
151
167

answered Mar 16 '15 at 14:00

Christopher Craig

31
1
1
4

And then you must transpile the less into CSS for your change to work in the browser... this required final step is not mentioned in your answer. – steampowered Jul 26 '15 at 00:21
1

This was the best answer for me. I think the steps to transpile the less code exceed the scope of the question, since Opal already mentioned here: "if your using Less...", so, if you are using it, you should know how to transpile it. – Guillermo Maschwitz Aug 31 '15 at 18:03

score 1 · Answer 4 · answered Oct 18 '16 at 09:36

1

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.

answered Oct 18 '16 at 09:36

WebTim

207
4
10

score 0 · Answer 5 · answered Dec 28 '13 at 18:38

0

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.

answered Dec 28 '13 at 18:38

2

this is only one of MANY places which need to change when changing the breakpoint. Not a good answer. – steampowered Jul 26 '15 at 00:18

score 0 · Answer 6 · answered Jul 26 '15 at 00:25

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
     {

Change Collapse breakpoint in Bootstrap 3.0

6 Answers6

Linked