Изначально input
поиска не видно, он появляется при наведении на лупу и двигает всё меню, как можно сделать чтобы input
становился поверх остальных пунктов меню?
<section class="header">
<div class="header-inner">
<img src="img/menu.svg">
<img src="img/logo.png" alt="Bondi" class="logo">
<div class="nav">
<div class="nav-list">
<li class="nav-list__item active">Home</li>
<li class="nav-list__item">Services</li>
<li class="nav-list__item">Portfolio</li>
<li class="nav-list__item">About</li>
<li class="nav-list__item">Contact</li>
</div>
<div class="search">
<input class="search__input" type="text" placeholder="Search">
<img src="img/search.svg" class="search__icon" alt="">
</div>
<button class="btn">Login</button>
</div>
</div>
</section>
.search {
padding: 0 15px;
border-left: 1px solid #00C6BF;
display: flex;
align-items: center;
}
.search:hover > .search__input {
width: 200px;
}
.search__icon {
width: 24px;
}
.search__input {
border: none;
font-style: 18px;
background-color: transparent;
outline: none;
color: rgba(255, 255, 255, .9);
width: 0;
transition: .5s ease-out;
}
.search__input:focus {
width: 200px;
}