Как вставить 2 меню Bootstrap Navbar на сайт?

Добрый день. Столкнулся с проблемой, у меня 2 меню на сайте и при открытие сайта на телефоне появляются 2 кнопки для раскрытия каждого меню, но при нажатии на любую, открываются сразу оба меню. Подскажите пожалуйста, как это исправить?

Комментарии: 2

Александр Мальцев
Александр Мальцев
Если идёт речь про меню Bootstrap Navbar, то вам необходимо установить разные идентификаторы для его содержимого. Например, menu-1 и menu-2. А также установить кнопкам, с помощью которых вы открываете содержимое соответствующее меню, нужные цели (data-target). Например, #menu-1 и #menu-2.
<!-- 1 меню -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="menu-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 2 меню -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-2" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="menu-2">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>
Тимофей
Тимофей
Спасибо, все работает