Не получается сделать мобильное меню для адаптива. Проблема в том что в навигации находится логотип по центру, и мне нужно сделать таким образом чтобы логотип разделился с текстом навигации.
Чтобы логотип оставался в центре, а текст был в бургер меню.
/* Container */
.container {
max-width: 1150px;
margin: 0 auto;
width: 100%;
padding: 0 15px;
}
/* Header */
.header {
background-color: #F6F2EE;
width: 100%;
}
.header__burger-btn {}
/* Navigation */
.menu {
padding-top: 33px;
padding-bottom: 168px;
position: relative;
}
.menu__list {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu__list-link {
color: #000;
}
.search {
background-color: #c8c5c5;
border: none;
outline: none;
padding: 5px;
}
.search-form.active {
display: flex;
align-items: center;
}
.search-form {
display: none;
background-color: #fff;
border-radius: 10%;
padding: 10px;
border: none;
gap: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
@media (max-width: 992px) {
.menu {
position: absolute;
top: 0;
right: 0;
}
.menu__list {
display: block;
}
}
<header class="header">
<div class="container">
<button class="header__burger-btn">
<span class="burger__span"></span>
<span class="burger__span"></span>
<span class="burger__span"></span>
</button>
<nav class="menu">
<ul class="menu__list">
<li class="menu__list-item">
<a class="menu__list-link" href="">Home</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href=""> About </a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href=""> Manu</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="">Reservation</a>
</li>
<img class="logo" src="image/logo.png" alt="Картинка">
<li class="menu__list-item">
<a class="menu__list-link" href="">Pages</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="">Shop</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href=""> Contact</a>
</li>
<li class="">
<img src="image/search.png" alt="search" id="search-btn">
</li>
<form action="" class="search-form">
<input class="search" type="search" name="" placeholder="Search..." id="search-box">
<label for="search-box"><img class="search-img" src="image/search.png" alt="search"></label>
</form>
</ul>
</nav>
</div>
</header>
javascript
. Полно роликов и статей по теме бургера