css - 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>

Answer 1

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.