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

Question

[Dymok]

Собственно, в макете есть такая шапка:

Трудность заключается в том, что логотип должен быть посередине, а слева и справа от него - пункты меню.
Есть ли какие-либо варианты сверстать его, не костыля и не подбирая отступы?

Answer 1

[prrrrrrr]

Если я правильно понял

Comments

[NeKt0]

Просто класс! :-) Изящнее некуда!

Answer 2

[NaN]

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

Просто будет у тебя два одинаковых блока (одинаковая структура и классы)

Answer 3

[forspamonly2]

можно сделать двумя колонками с достаточно большим зазором между ними.

Answer 4

[Islam Ibakaev]

Проблема решений выше в том, что они не учитывают, что лого выходит за пределы шапки. Хлебные крошки находятся в теге main. Соответственно, твоё лого должно быть за пределами тега header, скажем, аккурат после открываюшего тега body. Боди должен иметь position: relative, а лого - position: absolute; left: 50%; transform: translateX(-50%);
Вёрстку шапки делается изи на флексбокс: 5 колонок налево, 5 направо, а родителю этих колонок justify-content: space-between; К примеру, если взять сетку из bs4, то будет так:

<div class="row justify-content-between">
  <div class="col-lg-5"></div>
  <div class="col-lg-5"></div>
</div>