Как стоит сверстать хэдер?

Question

[Alekosh Akhosh]

Доброй ночи!
Ничего если лого и кнопка(справа), находится вне предела сетки?
Нормально будет, если пропишу слева margin-left, и справа margin-right?

Comments

[Ankhena]

Ничего если лого и кнопка(справа), находится вне предела сетки?

На этот вопрос уже ответил заказчик, когда принял макет от дизайнера.

Нормально будет, если пропишу слева margin-left, и справа margin-right?

Это скорее padding точек по 20.
Я бы ограничила ширину этого блока и центрировала. Какую именно ширину поставила бы, зависит от того, что ещё есть в макете (какие-то выпирающие из контентной ширины блоки, картинки, красотульки) и буду ли пропорционально все увеличивать на ширине больше макетной.

Как стоит сверстать хэдер?

Обычный display flex
И два варианта:
- margin-left auto для меню
- space-between, если "заказать демо" включить в список меню.

Answer 1

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

Тут явно шапка шире сетки, я бы её ширину ограничил бы шириной макета, а дальше как заказчик захочет.
В вёрстке шапок не использую колонки, обычно это общий враппер шапки, потом иннер с дисплей флекс, лого, меню, кнопка.

Answer 2

[Артем Золин]

Визуально выглядит будто у проекта сетка на всю ширину с паддингами по краям, .container-fluid, если бутстрап. Лого 3 колонки, кнопка 2, остальное под меню с выравниванием по правому краю

Answer 3

[ramanovsky]

Здесь как я понимаю сетки нету у header, да и впринципе сложные header по сетке делать очень сложно. Видимо вам тут без сетки и нужно делать.

Посмотрите как на этом сайте делалось header, вам примерно такое же нужно делать.
То есть привязать к экрану девайса а не к wrapper.

ps: отдалите только экран Ctrl -
https://about.gitlab.com/