UnluckySerivelha
@UnluckySerivelha

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

Собственно, в макете есть такая шапка:
5ce2a919c963e198146841.png
Трудность заключается в том, что логотип должен быть посередине, а слева и справа от него - пункты меню.
Есть ли какие-либо варианты сверстать его, не костыля и не подбирая отступы?
  • Вопрос задан
  • 742 просмотра
Пригласить эксперта
Ответы на вопрос 4
KornevaViktoria
@KornevaViktoria
Frontend Developer
дели меню на две части.
и просто расставляй элементы друг за другом как надо.

Просто будет у тебя два одинаковых блока (одинаковая структура и классы)
Ответ написан
@forspamonly2
можно сделать двумя колонками с достаточно большим зазором между ними.
Ответ написан
beefjerky
@beefjerky
Проблема решений выше в том, что они не учитывают, что лого выходит за пределы шапки. Хлебные крошки находятся в теге 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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы