Как сверстать шапку если логотип посередине?

Question

[Noooodle]

Друзья, я только начала изучать верстку, передо мной стоит задача сверстать вот такую шапку


Как это лучше сделать если на мобилке меню преобразуется в гамбургер?


Изначально я вообще всю шапку обернула в ul, потом решила разбить все на col (первые два пункта, лого, последние пункты ?а куда гамбургер?) , но выходит криво :D

Спасибо всем кто откликнется!

Answer 1

[WapSter]

Плохой вариант. Продублировать меню.
Еще хуже. При помощи js перемещать блок с логотипом по DOM дереву.
Нормальный. Сделать логотип относительно позиционированым. Вставить по центру, в мобильной версии делать статичным или просто изменить позицию.

Comments

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

Чем плох вариант с перемещением логотипа по дереву? мне в большинстве проектов из-за прихотей дизайнеров приходится подобное делать. Обычно не логотип, а какие-то куски меню или социалки, но все же. Чтоб знать на будущее. И почему дублировать меню это лучше, я наоборот стараюсь этого избегать, потому и решения на js

[WapSter]

Антон Литвиненко, тут самый верх страницы, в определенных условиях будет выглядить стремно, пока не прогрузится js. А так ничего особенного, если не увлекаться. Частый перерендер довольно затратное действие. Поддерживать становится еще чуть сложнее. В данной задаче, дублирование будет лучше, но подобного стоит избегать вообще.

[Makssof]

А чем плох вариант с дублированием меню?

[WapSter]

Makssof, увеличивается размер страницы, но в данном случае незначительный эффект. Сеошнику задолбаешься объяснять, что страница не попадет в спам, так как для разных устройств она не будет дублировать код.

Answer 2

[Арсений Матыцин]

Можно сделать грид сетку для шапки, где будет 3 колонки (auto [ширина лого] auto), где навигация будет занимать с первой по последнюю колонку первой строки. А лого будет занимать вторую колонку. Схему же навигации повторить, чтобы образовалось негативное пространство под лого, где оно должно быть.

Скорее всего потребуется пошаманить с событиями мышки (это описывается на уровне CSS), снимая отлов событий с контейнеров элементов и присваивая их вложенным.

Answer 3

[Владимир Коротенко]

Вот прямо для вашего случая
https://habr.com/ru/company/ruvds/blog/518514/