Вопрос по html/css. Как сверстать две панели навигации в разных блоках

Автор вопроса: Evgeny

Как сверстать две панели навигации в разных блоках. Как на скрине. При планшетном разрешении скрывалась в бургер нижняя. В мобильной обе

Источник

Ответы (1 шт):

Автор решения: Макс к

Верстаете верхний блок;
Верстаете нижний блок;
Сверстайте блок бургер меню под "основным меню" и задайте ему display: none, чтобы его скрыть. Чисто для примера:

<header class="header-2">
 <a href="#" class="sub-menu-item">Item</a>
   <a href="#" class="sub-menu-item">Item</a>
 <a href="#" class="sub-menu-item">Item</a>
</header>
<div class="burger"></div>

задайте медиа выражение, которое скроет осноное меню навигации и покажет бургер. Для примера для нижнего блока

@media (max-width: 768px) {
  .header-2 {
display: none;
}
.burger {
display: block;
}
}

Сделайте аналогичное медиа-выражение для двух блоков при рамере экрана для моб устройств.

→ Ссылка