I'm facing an issue with two fixed navbars positioned one under the other. I used the 'fixed-top' class to fix both at the top, but the margin-top I added to make them align is not responsive.
Is there a way to make the margin-top responsive or calculate the necessary margin dynamically?
DEMO
HTML
<nav class="navbar navbar-expand-md navbar-light bg-white MyNavBar fixed-top" >
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" id="dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="btn"><img src="home.svg"></a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="btn"><img src=".logo-home.svg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2" id="dual-collapse2">
<ul class="navbar-nav ml-auto">
<div class="row">
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item" style="width: 57px;">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</div>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top Mytoolbar" style="margin-top: 74px;">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse22" id="dual-collapse22">
<ul class="navbar-nav mr-auto" id="dual-collapse22">
<li class="nav-item folder_category">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse22">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav navbar-collapse collapse w-100 order-3" id="dual-collapse22">
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse22" id="dual-collapse22">
<ul class="navbar-nav ml-auto">
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link">
</a>
</li>
<li class="nav-item">
<a class="toggle-third nav-link">
<img src="ra.svg" >
</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
</nav>