Twitter Bootstrap: Collapse only certain menu items into drop-down

Question

I'm wondering how to create a Twitter Bootstrap navbar that collapses items in that menu, one or two items at a time upon resizing the browser window.

Most navbars I've seen have collapsed the entire navbar into one drop-down; basically hiding everything on that navbar when the window is resized. But I need it to still reveal some menu items; so a partial collapse.

Here's an example of what I mean (menu below):

Home | About | Services | Order | Contact

When the browser window is resized from the right, what I want it to do is to put the last menu item (or two) into a drop-down so then it would look like this:

Home | About | Services | More

                    -> Order
                    -> Contact

'More' would need to automatically be created as a drop-down menu and it automatically list 'Order' and 'Contact' menu items in that drop-down menu. And as the window gets smaller more items in that nav bar would be added to that drop-down menu. And when the browser window is resized to full screen width, then the navbar goes back to normal. This is what is needed.

Of the many links I've looked at, here's a couple of links I've found (that does not knock the whole navbar into one drop-down menu) but still like all the others it does not do what I described:

1. http://jsfiddle.net/caio/gvw7j/embedded/result/
2. Twitter Bootstrap Multilevel Dropdown Menu

What is to the best way to achieve what I need using any example above?

Answer 1

First, determine which nav items should "disappear" at each width breakpoint. Then, add the correct hidden-* classes to hide the nav items based on the current breakpoint.

My solution requires that you duplicate some of the nav items, but set their visibility, using the hidden-* classes, so that they show only at the appropriate width breakpoint.

Basically, when making the browser narrower, a nav item will be hidden from the main navbar, and the related nav item will be displayed in the dropdown. My example has nav items being hidden at each of the four, default width breakpoints.

<nav class="navbar navbar-default navbar-static-top navbar-inverse" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="/" class="navbar-brand">Brand Name</a>
    </div>
    <div id="navbar-menu" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <!--- Include all menu items, below, regardless of display width. --->
            <!--- This allows the full menu to be displayed on extra-small (xs) devices. --->
            <!--- Hide menu items depending on the available display width. --->
            <li><a href="/calendar/">Calendar</a></li>
            <li><a href="/journal/">Journal</a></li>
            <li><a href="/shows/">Shows</a></li>
            <li><a href="/venues/">Venues</a></li>

            <!--- Hide the following menu items depending on the available display width. --->
            <!--- Menu items that can't fit on the main nav bar will be displayed in the "More" dropdown menu. --->
            <li class="hidden-sm"><a href="/blackouts/">Blackouts</a></li>
            <li class="hidden-sm"><a href="/tasks/">Tasks</a></li>
            <li class="hidden-sm hidden-md"><a href="/songs/">Songs</a></li>
            <li class="hidden-sm hidden-md"><a href="/testimonials/">Testimonials</a></li>
            <li class="hidden-sm hidden-md hidden-lg"><a href="/artists/">Artists</a></li>
            <li class="hidden-sm hidden-md hidden-lg"><a href="/categories/">Categories</a></li>
            <li class="hidden-sm hidden-md hidden-lg"><a href="/cities/">Cities</a></li>
            <li class="hidden-sm hidden-md hidden-lg"><a href="/reports/">Reports</a></li>
            <li class="hidden-sm hidden-md hidden-lg"><a href="/users/">Users</a></li>

            <!--- The "More" dropdown menu item will be hidden on extra-small displays. --->
            <li class="dropdown hidden-xs">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li class="hidden-lg hidden-md"><a href="/blackouts/">Blackouts</a></li>
                    <li class="hidden-lg hidden-md"><a href="/tasks/">Tasks</a></li>
                    <li class="hidden-lg"><a href="/songs/">Songs</a></li>
                    <li class="hidden-lg"><a href="/testimonials/">Testimonials</a></li>
                    <li class="divider hidden-lg"></li>

                    <!--- These menu items will only appear in the "More" dropdown menu. --->
                    <li><a href="/artists/">Artists</a></li>
                    <li><a href="/categories/">Categories</a></li>
                    <li><a href="/cities/">Cities</a></li>
                    <li><a href="/reports/">Reports</a></li>
                    <li><a href="/users/">Users</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="/?signout" id="signout"><span class="glyphicon glyphicon-lock"></span> Sign Out</a></li>
        </ul>
    </div>
</div>