How to make search form on top of navbar in bootstrap 4?

Question

css

There is such a list in the navbar. How to make it so that when you click on the search icon, the search form is displayed on top of the other icons? an example is on this site

<ul class="navbar-nav my-2 my-md-0">
          <li class="nav-item">
               <li class="nav-item"> <a class="nav-link" href="#"><i class="fab fa-facebook-f"></i></a></li> 
                 <li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-twitter"></i></a></li> 
               <li class="nav-item"> <a class="nav-link" href="#"><i class="fab fa-vk"></i></a></li> 
                <li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-instagram"></i></a>    </li>          
               <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-search"></i></a>    </li>   
            

          </ul>

Answer 1

For nav-item, assign an identifier (for example, bars), after it (behind the closing list tag) create a button and assign a handler
. It will look something like this...

<button id="btnc" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation" onclick="myFunction()">
      <span class="navbar-toggler-icon"></span>
    </button>

Next, we need to assign a class to #bars on click ... Let it be snos

function myFunction() {
   var element = document.getElementById("bars");
   element.classList.toggle("snos");
}

It can be inline, you can connect it with an external js file.
After that, we need to write style properties for .snos, taking into account its interactions with neighbors, if we want the style properties of neighbors to change when this class appears.
CSS selectors to the rescue here!
//up
In case nothing is clear at all, here is a link to a mothballed and raw project.
The menu is the carrier of this code, the developer tools will help you learn the information that I threw in.