0

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

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

1 ответ 1

1

Попробуйте задать класс collapse navbar-collapse для списка с id#navbar

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.