Как сделать «гамбургер меню» для мобильной версии сайта?

Question

[Andrew Corput]

Как с помощью медиа запросов

@media only screen and (min-width: 1024px) {
    
}

сделать чтобы при ширине экрана менее 1024px меню сворачивалось в "Гамбургер".
Т.е. как на данном сайте?

Answer 1

[kn1ght_t]

туторчик

Answer 2

[Имя Имечко]

display: block;
display: none;

Answer 3

[Ilya Korablev]

Не поверите, берете и делаете.
А на самом деле просто для мобильной версии делаете меню с другим div.

Comments

[Andrew Corput]

я в этом деле новичок, так что можно поподробней?

[Ilya Korablev]

Andrew Corput: ну смотрите.
Для дисплеев большего размера делаете одно меню, а для меньших другое. Если расширение меньше заданного - убираете большое меню и показываете маленькое.