The ultimate goal is the classic bootstrap chip for responsive design - when the screen is narrowed to the maximum, a button appears, and when pressed, all parts of the menu drop out. The button turned out, the menu is not tied to it yet.
<nav class="navbar-inverse navbar-default navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="collapse navbar-header navbar-collapse visible-xs visible-sm visible-md visible-lg" id="bs-example-navbar-collapse-1"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul class="nav navbar-nav navbar-left" id="navbar"> <li class="page-scroll visible-lg "> <a href="#portfolio"> <img src="images/%D0%9B%D0%BE%D0%B3%D0%BE%D1%82%D0%B8%D0%BF.png" class="logo"> </a> </li> <li class="page-scroll visible-lg visible-md"> <a href="#portfolio"> <form class="navbar-form navbar-right hidden-xs "> <input type="text" class="form-control1 navbar-search" placeholder="Поиск по компании"> </span> </form> </a> </li> <li class="page-scroll visible-md visible-lg visible-sm "> <a href="#about"> <button type="button" class="btn btn-default btn-width-active">Моя Компания</button> </a> </li> <li class="page-scroll fontsmenu visible-md visible-sm visible-lg "> <a href="#contact"> <button type="button" class="btn btn-default btn-width">Рабочее место</button> </a> </li> <li class="fontsmenu visible-xs visible-sm visible-md visible-lg fixed-size"> <a href="#" id="bill"> <img src="images/Layer-136.png">Гейтсман Билл <span class="glyphicon glyphicon-cog"></span> </a> </li> </ul> </div> </div> </nav> 
