Есть вот такой код navbar.
Вот что должно получиться на выходе
Не понимаю как это сделать, выровнял всё по центру, отступ от логотипа 150px влево и вправо. Меню будет адаптивным, не думаю что через absolute будет правильное решение... Может кто-то подсказать как лучше выполнить данный код, чтобы соответствовало скрину ? Буду признателен ;)
.container {
width: 1170px;
margin: 0 auto;
}
.navbar {}
.nav-menu {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}
.nav-menu__item {
display: flex;
margin: 0px 15px;
}
.nav-menu__item a {
text-decoration: none;
color: #555555;
}
.nav-menu__item .active {
text-decoration: none;
color: #5363db;
}
.nav-menu__item_center {
display: block;
margin: 0px 135px;
}
.nav-menu__item.logo {
position: absolute;
top: 0;
}
<nav class="navbar">
<div class="container">
<ul class="nav-menu">
<li class="nav-menu__item"><a href="#" class="active">About us</a></li>
<li class="nav-menu__item"><a href="#">Gallery</a></li>
<li class="nav-menu__item"><a href="#">Reservation</a></li>
<li class="nav-menu__item logo"><img src="//www.anyway.website/d/logo.png" alt="YOGA" class="logo"></li>
<li class="nav-menu__item"><a href="#" class="nav-menu__item_center">YOGA</a></li>
<li class="nav-menu__item"><a href="#">Blog</a></li>
<li class="nav-menu__item"><a href="#">Elements</a></li>
<li class="nav-menu__item"><a href="#">Shop</a></li>
</ul>
</div>
</nav>