Как реализовать 2 адаптивных меню на Bootsrеap 4?

Question

[ayapergenov]

Есть горизонтальное меню из 2 пунктов в шапке и вертикальное меню в левом сайдбаре.
Нужно, чтобы в мобильных версиях меню сайдбара либо соединялось с меню в шапке либо сворачивалось в гамбургер.
Подскажите как грамотно сделать?

Comments

[Антон Литвиненко]

Можно переносить джаваскриптом, часто приходится так делать

Answer 1

[Виктор Таран]

как-то так ?

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

Но вам лучше пересмотреть интерфейс, два бутерборода быть не должно, мало того 99% процентов сайтов обходятся без них. Так что пересмотрите интерфейс.