How to create a navbar with 2 collapse menu? [duplicate] - html

Question

This question already has answers here:
Consolidate multiple Bootstrap 3 navbar menus on collapse
(1 answer)
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 5 years ago.
My codes are working fine on mobile view but on desktop right side Links are getting out of nav-bar. i am trying to create nav bar with Brand in center, search bar on left and links on right. and how to move hambuger bar on left and search on right side on mobile view .. (sorry for my english)
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"><span class="glyphicon glyphicon-search" aria-hidden="true"> </span>
</button>
</div>
<div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
<form 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>
</form>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>

Answer 1

#media (max-width: 768px) {
.nav_bar_align .navbar-brand{
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.nav_bar_align .nav_humber{
float: left;
margin-left: 15px;
z-index: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top nav_bar_align" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle nav_humber" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"><span class="glyphicon glyphicon-search" aria-hidden="true"> </span>
</button>
</div>
<div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
<form 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>
</form>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>

Answer 2

add menu-1 class or call it whatever you want to the button
<button type="button" class="navbar-toggle menu-1" data-toggle="collapse" data-target="#navbar-collapse-2">
then add this to your css:
.menu-1 {
float: left;
margin-left: 10px;
}
Update: to handle search issue remove width: 100 and increase left for .navbar-brand like this:
.navbar-brand {
position: absolute;
/*width: 100%;*/
left: 50%;
top: 0;
text-align: center;
margin: auto;
}
and add this css also:
#media (max-width:767px){
a.navbar-brand {
left: 45%;
}
}
check the updated Jsfiddle