Two navigation bars are extended together when displayed on mobile - html

Question

I use two Bootstrap 3 navbars, first one is default and the second is inverse. The problem is when I display the page in mobile devices the two are collapsed normally, but when I extend the second navbar both extended together. Also, when I collapse the second both of them are collapsed.
<!--Start NAVBAR 1-->
<nav class="navbar navbar-default" style="font-weight: bold; background-color: white; margin-bottom: 0; margin-top: 0;
border-color: transparent;" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<img src="" class="img-responsive" href="#" style="padding-left:50px;">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-center" id="bs-example-navbar-collapse-1">
<div class="col-xs-offset-3 col-xs-6 text-center">
<ul class="nav navbar-nav navbar-center">
<li>
<form class="navbar-form" role="search" style="padding-top:15px">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i style="color:#183F66" class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right" style="padding-top:10px; margin:0 !important;">
<li><span class="glyphicon glyphicon-log-out" style="color:#183F66"></span> Logout</li>
<li><span class="glyphicon glyphicon-user" style="color:#183F66"></span> username</li>
</ul>
</div>
</nav>
<!--END NAVBAR 1-->
<!--Start NAVBAR 2-->
<div class="navbar navbar-inverse">
<!-- <div class="container"> -->
<div style="margin-left:5px;margin-right:5px">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="color:white">
<li>#Html.ActionLink("News", "About", "Home", new { Style = "color:White; font:bold" })</li>
<li>#Html.ActionLink("Supervisors", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
<li>#Html.ActionLink("About SaVeIT", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
</ul>
</div>
</div>
</div>

Answer 1

The problem is that, your second toggle button has data-target=".navbar-collapse" which targets both navbars. Use an id on the second collapsible and target it with that, just like in the example below (I use #bs-example-navbar-collapse-2 here).
<!--Start NAVBAR 1-->
<nav class="navbar navbar-default" style="font-weight: bold; background-color: white; margin-bottom: 0; margin-top: 0;
border-color: transparent;" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<img src="" class="img-responsive" href="#" style="padding-left:50px;">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-center" id="bs-example-navbar-collapse-1">
<div class="col-xs-offset-3 col-xs-6 text-center">
<ul class="nav navbar-nav navbar-center">
<li>
<form class="navbar-form" role="search" style="padding-top:15px">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i style="color:#183F66" class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right" style="padding-top:10px; margin:0 !important;">
<li><span class="glyphicon glyphicon-log-out" style="color:#183F66"></span> Logout</li>
<li><span class="glyphicon glyphicon-user" style="color:#183F66"></span> username</li>
</ul>
</div>
</nav>
<!--END NAVBAR 1-->
<!--Start NAVBAR 2-->
<div class="navbar navbar-inverse">
<!-- <div class="container"> -->
<div style="margin-left:5px;margin-right:5px">
<div class="navbar-header">
<!-- Note: data-target="#bs-example-navbar-collapse-2" -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Note the new id: #bs-example-navbar-collapse-2 -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav" style="color:white">
<li>#Html.ActionLink("News", "About", "Home", new { Style = "color:White; font:bold" })</li>
<li>#Html.ActionLink("Supervisors", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
<li>#Html.ActionLink("About SaVeIT", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
</ul>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>