Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change Collapse breakpoint in Bootstrap 3.0

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>
like image 276
WiZ.Prince Avatar asked Dec 28 '13 18:12

WiZ.Prince


4 Answers

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.

like image 192
Christina Avatar answered Nov 08 '22 20:11

Christina


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.

like image 28
Shina Avatar answered Nov 08 '22 21:11

Shina


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.

like image 2
Christopher Craig Avatar answered Nov 08 '22 21:11

Christopher Craig


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.

like image 1
WebTim Avatar answered Nov 08 '22 21:11

WebTim