How to place navbar below sticky navbar using bootstrap 4?

I am using bootstrap 4 to make an application, in which i have two navbars and both needs to be fixed at top in which the second navbar needs to hide while scrolling.

Html:

Navbar 1:

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-custom-light"> <div class="container-fluid"> <div class="row w-100"> <div class="col-md-2 col-lg-2 col-sm-4 col-xs-4"> <a class="navbar-brand" href="#"> New Project </a> </div> <div class="col-md-4 col-lg-4 col-sm-6 col-xs-6 d-none d-sm-none d-md-block mt-2"> <h4 class="font-weight-600"> Little description </h4> </div> <div class="col-3"></div> <div class="col-3 mt-3 d-none d-sm-none d-md-block"> <ul class="navbar-nav pl-5"> <li class="nav-item mr-3"> <a class="nav-link" href="#"> Notification </a> </li> <li class="nav-item font-weight-600 mr-3"> <a class="nav-link text-capitalize" href="#"> Hello Admin </a> </li> <li class="nav-item font-weight-600 mr-3"> <a class="nav-link text-capitalize mr-3" href="#"> Profile </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> search </a> </li> </ul> </div> </div> </div> </nav> 

Navbar 2:

<nav class="navbar fixed-top navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> 

Here both the navbar needs to be fixed top for which i have used fixed-top class..

But as of now the navbars are overlapping each other.

You could see in the link https://www.bootply.com/y8EfMpCMc4# where the overlapping happens.

Kindly help me to place a navbar 2 below navbar 1 with position fixed (which also needs to be responsive), in which the navbar 2 alone needs to be in collapsed for small devices and needs to be on right side of navbar 1's navbrand ie.right to New Project.