I am looking to implement a design with two navigation bars that share a single toggle. The first navbar should include the logo, email icon, and a search box, while the second navbar is reserved for additional links.
On smaller screens, when the toggle is activated, I want the items from the top navbar to display below the second navbar in the following order:
Home
About
Departments
Admissions
Downloads
Email
Search
<nav class="navbar navbar-expand-xl navbar-light" style="background-color:#FFFFFF;" id="navtop">
<a class="navbar-brand" href="#"><img src="logo.png"></a>
<button class="navbar-toggler" data-toggle="collapse" data-target=".navbars">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbars" id="collapse_target1">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href=""><i class="far fa-envelope"></i></a>
</li>
</ul>
<form class="form-inline">
<input class="form-control form-control-sm" type="search" placeholder="Search">
<button class="btn btn-light btn-sm " type="submit"><i class="fas fa-search" aria-hidden="true"></i></button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-xl sticky-top" style="background-color:#FFFFFF;" id="navbottom" >
<div class="collapse navbar-collapse navbars" id="collapse_target2" >
<ul class="navbar-nav mx-auto" >
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Departments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Admissions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Downloads</a>
</li>
</ul>
</div>
</nav>