Creating a dual navigation bootstrap, only a 2-row folding

Question

I want to create a dual navigation bar (two lines) using Bootstrap.

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

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

It's hard for me to collapse the second line in the hamburger menu.

My code: (did it manually to achieve the 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 the entire container fluid with a navigation bar, but then I could not achieve the design related in: (demo) . I tried to adjust the CSS options, but could not get the look and exact measurements.

Any way to make the second line collapsible on a mobile device, manually or otherwise, while preserving the design?

Answer 1

Here is a slightly different idea. I like the second Macsupport navigation bar from your original design, but the toggle button on the second line of the mobile device doesn't make much sense to me. Especially on mobile phones where space is limited. The presence of a hamburger button in the far right corner does not actually detract from the logo.

Here is a pretty standard navigation example, except that I added the .twoRow class

 <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 CSS on a widescreen device, just clear the float .navbar-collapse so that it creates a new line:

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

Working demo in jsFiddle

It will look like this:

Answer 2

The following is an example :

 /* CSS */ .nav2 { margin-top: 50px; } 

 <!-- HTML --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <a class="navbar-brand" href="#">Brand</a> </div> </nav> <nav class="navbar navbar-inverse nav2" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>