Creating a Bootstrap twin navbar, only 2nd row collapsible

Question

I want to create a twin navbar (two rows) with Bootstrap.

The navbar template doesn't really meet my design goals, which look something like: (this demo)

+-------------+--------------------------------+
|    title    |                                | this part does not collapse
+-------------+--------------------------------+
|  two-line  |  two-line |                     | on smaller screens,
|   button   |   button  |                     | collapses to 'hamburger' menu
+----------------------------------------------+

I am having difficulty collapsing the 2nd row into the hamburger menu.

My code is: (did this manually to achieve look as above)

<table>
<tr>
(1 cell for title, 1 cell for rest of row)
</tr>
<tr class="nav2">
        <td style="width:100%;" colspan="2">
        <table style="width:600px;">
            <tr>
                <td style="width:100%;">
                    <div class="container-fluid">
                        <div class="row">
                            <a href="#"><div class="col-xs-3">
                                <span class="link">Heatmap</span>
                            </div></a>
                            <a href="#"><div class="col-xs-3">
                                <span class="link">Basic<br>Reports</span>
                            </div></a>
                            <a href="#"><div class="col-xs-3">
                                <span class="link">Group-aware<br>Reports</span>
                            </div></a>
                            <a href="#"><div class="col-xs-3">
                                <span class="link">Auto Group<br>Identification</span>
                            </div></a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>
(...)

I would replace that whole container-fluid with a navbar, but then I wouldn't be able to achieve the design as linked in: (demo). I tried adjusting the CSS parameters, but wasn't able to get the look and precise measurements.

Any way to make the 2nd row collapsible on mobile, manually or otherwise, while preserving the design?

Answer 1

Here's a slightly different idea. I like Macsupport's second navbar from your original design, but the toggle button on a second row on a mobile device doesn't make a lot of sense to me. Especially on mobile where space is limited. Having a hamburger button on the far right doesn't really detract from the logo at all.

Here's a pretty standard navbar example, except I've added the class .twoRow

<div class="navbar navbar-inverse twoRow">
    <div class="container">
        <!-- Header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 
                    data-toggle="collapse" 
                    data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                Bootstrap 3 Skeleton
            </a>
        </div>
        <!-- Navbar Links -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

For the CSS, on a widescreen device, just clear the .navbar-collapse float so it creates a new line:

@media (min-width: 768px) { 
    .twoRow .navbar-collapse {
        clear: left;
    }
}

Working Demo in jsFiddle

Which will look like this: