Как сделать форму поиска поверх навбара в bootstrap 4?

Question

[Алексей Королёв]

Есть в навбаре такой список. Как сделать так, чтобы при нажатии на иконку поиска выводилась форма поиска поверх остальных иконок? пример есть на этом сайте

<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

[Дмитрий]

Для nav-item присвоить идентификатор (к примеру bars), за ним (за закрывающим тэгом списка) кнопку создать и присвоить обработчик
onclick="myFunction()"

Примерно так выглядеть будет...

<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>

Далее нам нужно к #bars присвоить по клику класс...Пускай будет snos

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

Можно инлайн, можно внешним js файлом подключить.

После этого нужно прописывать стилевые свойства для .snos, учитывая его взаимодействия с соседями, если мы хотим чтобы при появлении этого класса изменялись стилевые свойства соседей.

Селекторы CSS в помощь тут!

//up

На тот случай, если вообще ничего не понятно, вот ссылка на законсервированный и сырой проект.
Менюшка носитель этого кода, инструменты разработчика помогут усвоить инфу, что я подкинул.