Q:

How to create a navbar with 2 collapse menu?

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><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
</nav>

A:

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

