Как сделать двойное меню, чтобы при этом логотип был на обе части меню?

Question

[qory_san]

Добрый день, беспокою с вопросом двойного меню. Первый опыт верстки сайта на бустрапе, в системе сеток не могу до конца разобраться. ТЗ - двойное меню с логотипом, который как-бы делится на обе части меню. Фото прилагаю ниже.


Собственно говоря, как расположить так логотип? Фото того, что вышло у меня и свой код так же расположены ниже.

<div>
  <header class="py-3">
    <div class="container d-flex flex-wrap justify-content-right">
      <img class="col-1" src="logo.svg">
      <form class="col-12 col-lg-auto mb-3 mb-lg-0 poisk_form">
        <input type="search" class="form-control" placeholder="ПОИСК..." aria-label="Поиск">
      </form>
      <ul class="nav justify-content-right">
        <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="Vector.svg"></a></li>
        <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="Vector2.svg"></a></li>
        <li class="nav-item-number nav-link link-dark">8 [phone]</li>
        <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="корзина.svg"></a></li>
      </ul>
    </div>

  </header>
<nav class="py-2">
    <div class="container flex-wrap">
      <ul class="nav justify-content-right">
        <li class="nav-item-burger"><img src="burger.svg"></li>
        <li class="nav-item"><a href="#" class="nav-link link-dark px-2" aria-current="page">Каталог</a></li>
        <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active">Новинки</a></li>
        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Акции</a></li>
        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Доставка</a></li>
        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">О нас</a></li>
        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Контакты</a></li>
      </ul>
    </div>
  </nav>
</div>

Answer 1

[archelon]

приблизительно так

<header>
  <div class="container d-flex">
    <img class="col-1" src="logo.svg">
    <div class="col-11">
      <div class="container d-flex flex-wrap justify-content-right">
        <form class="col-12 col-lg-auto mb-3 mb-lg-0 poisk_form">
          <input type="search" class="form-control" placeholder="ПОИСК..." aria-label="Поиск">
        </form>
        <ul class="nav justify-content-right">
          <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="Vector.svg"></a></li>
          <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="Vector2.svg"></a></li>
          <li class="nav-item-number nav-link link-dark">8 [phone]</li>
          <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="корзина.svg"></a></li>
        </ul>
      </div>
      <nav class="container flex-wrap">
        <ul class="nav justify-content-right">
          <li class="nav-item-burger"><img src="burger.svg"></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2" aria-current="page">Каталог</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active">Новинки</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Акции</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Доставка</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">О нас</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Контакты</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>