Bootstrap: How to make navbar two layered on small screens - html

Question

I have created a navigation bar with brand name and search box on left side and menus on right side.
Here is the bootply link
This is good on large screens, but on small screen, I want to display this as two bars on top, first one with the left content (brand name and search bar) and second one with the right content (menus). Can I do this just using bootstrap classes?

Answer 1

Try this:
DEMO
Use hidden class
<nav class="navbar navbar-default fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="hidden-xs hidden-sm">
<ul class="nav navbar-nav navbar-right">
<li>Menu1</li>
<li>Menu2</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default hidden-md hidden-lg" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav navbar-right">
<li>Menu1</li>
<li>Menu2</li>
</ul>
</div>
</div>
</nav>

Answer 2

this will be acheived by add another button for collapsing, look at this demo , other things will be ur work around
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".sidebar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>