0

Как мне такое сделать? (картинку на header)

Код моей шапки:

<header class="d-flex justify-content-around p-3 align-items-center">
    <img src="img/logo.svg" alt="">
    <div class="nav-links d-flex align-items-center">
        <div class="nav-link"><img src="img/search.svg" alt=""></div>
        <div class="nav-link"><img src="img/cart.svg" alt=""></div>
        <div class="nav-link"><a href="#" class="signup">Sign up</a></div>
        <div class="nav-link"><a href="#" class="signin">Sign in</a></div>
    </div>
</header>
6
  • может не надо думать как впихать картинку именно в шапку, и в целом поразмышлять куда ее стоит добавить?
    – teran
    29 дек 2021 в 7:50
  • @teran вообще, думал о том чтобы её вставить в блок ниже, но как её потом на header "задвинуть"?
    – axelmason
    29 дек 2021 в 7:57
  • Вопрос такой - при скролле меню будет фиксированное к верху страницы или нет? от этого зависит как можно реализовать ваш пример
    – klifort
    29 дек 2021 в 7:59
  • @klifort нет, нефиксированное
    – axelmason
    29 дек 2021 в 8:01
  • Я б header оставил как есть а блок с картонкой и текстом добавил следующим, и к нему добавил margin-top c минусовым значением высоты блока header
    – klifort
    29 дек 2021 в 8:03

1 ответ 1

0

Если header position: static (т.е. не должен прилипать к верху экрана), то просто разбейте блок на две части. Пример на bootstrap:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container row">
  <div class="col col-md-auto">
    <img src="https://static2.gazeta.ua/img2/cache/gallery/984/984368_1_w_590.jpg?v=0" width="300">
  </div>
  <div class="col py-2">
    <header>
      <h2>Header</h2>
    </header>
    <p>Content</p>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.