Increase bootstraps navbar collapse breakpoint without affecting another navbar on the same page

Question

I have a page. Vertically, it has two parts. The top is a navbar. The lower section is the content of the page.

The lower section has the bootstrap "container" class. Within the container, the left-side is a navigation area. The right-side is the content, which has another navbar. Here is what I have for the navbar.

<div class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="navbar-collapse collapse" id="control-panel">
            <ul class="nav navbar-nav">

                <li class="dropdown">
                    <a href="#" >Menu 1</a>
                </li>               
                <li class="dropdown">
                    <a href="#" >Menu 2</a>
                </li>               
                    <li class="dropdown">
                    <a href="#" >Menu 3</a>
                </li>               


            </ul>

        </div><!--/.nav-collapse -->

</div> <!-- end of  navbar -->

Note that I removed the immediate "container" child of "navbar" found in normal navbar examples, as in this link: http://getbootstrap.com/examples/navbar/. With this container, the navbar does not work well with dropdowns.

So far the navbar works, but I would like to increase its breakpoint for collapse. I found a few related posts at SO such as

Bootstrap 3 Navbar Collapse

but still have no idea about how to make it work in my case. I have this within-page navbar only on this page, not site-wide.

score 2 · Answer 1 · answered Aug 31 '14 at 02:17

2

Per Bootstrap Documentation

Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

In general this would change all your breakpoints for all NavBars. So there is no out-of-the-box solution from BootStrap. What I would suggest is to create your own set of styles that duplicate the NavBars with your custom break points.

answered Aug 31 '14 at 02:17

Erik Philips

53,428
11
128
150

Erik, thanks for your input. I may have found out a workaround. Thanks for chiming in!!! – curious1 Aug 31 '14 at 02:36

score 2 · Accepted Answer · edited May 23 '17 at 12:31

After considering Erik's input, I was playing around to see whether I could customize Bootstrap by only targeting the second navbar, and it seems that I have made it work.

Here is how. I wrapped the second navbar in a div as bellow:

<div id="target">
    <div class="navbar navbar-default" role="navigation">
    .....
    </div> <!-- end of  navbar -->
</div>

Then I followed what is said in this SO post: Bootstrap 3 Navbar Collapse

Here is my final CSS:

@media (max-width: 991px) {
    #target {

        .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;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }
}

So far it seems working. If what I did is wrong, please let me know. If this is right, hope it helps someone else.

Cheers.

Increase bootstraps navbar collapse breakpoint without affecting another navbar on the same page

2 Answers2

Linked