When I click on my search box, it expands to the left. However, I want the links next to the search box to also move to the left when the search box expands.
This is the code snippet I am currently working with:
<nav class="header-menu">
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li class="search-wrap">
<input class="search" type="search" placeholder="Search"></li>
</ul>
</nav>
.header-menu ul li {
display: inline-block;
vertical-align: middle;
}
.search-wrap {
width: 175px;
position: relative;
height: 27px;
vertical-align: middle;
display: inline-block;
}
.search {
border: 1px solid #ccc;
padding: 5px 7px;
margin-left: 15px;
width: 175px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
position: absolute;
right: 0;
top: 0;
}
.search:focus {
width: 225px;
}
Currently, the search box expands to the left upon clicking but the menu items do not move accordingly. How can I adjust this? Any suggestions would be greatly appreciated.
Thank you for your assistance!