Как сделать адаптацию для хедера?

Question

[Анастасия]

Подскажите, пожалуйста, как сделать адаптацию для хедера так как на картинке.
Чтобы элементы прятались в габургер по очереди?



Как все сразу спрятать я знаю, но меня интересует именно по очереди. Спасибо)

Comments

[Steppp]

Вот точно так же как все сразу, только по очереди))) Разбила хедер на 6 частей, и прячь нужные на определенной ширине)

[Анастасия]

Steppp, А как перенести все элементы по очереди в гамбургер? Только с помощью JS?

[Steppp]

Анастасия, Можно без JS, и нужно уметь верстать ((( Не берись пока за такое, делай что то по легче)

Тебе наверно будет самый вариант верстать 2 меню, одно в гамбургере, другое как на десктопе, и просто скрывать\показывать блоки( Но так лучше не делать,

[Родион Мещеряков]

Анастасия, Вообще, не самая тривиальная задача для верстки.
Да, проще всего начать с частичного дублирования меню - как Stepp подсказал. Но если есть время, лучше подумать над тем как можно без этого обойтись - это точно возможно без JS.

[secretsergey]

Анастасия, https://codepen.io/secretsergey/pen/ZEeKGrQ
Посмотрите, быстро накидал пример без js. Метод, как мне кажется, топорный. Интересно кто ещё что предложит.

[Даниил Чистяков]

Попробуйте сделать несколько медиазапросов через CSS и под каждый запрос задайте display: none нужным элементам с помощью псевдокласса :nth-child.
Ссылка на доку.

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

Я бы переносил на js