Move menu items to left when search box expands - html

Question

I have a search box which expands to the left when click on it. But the links next to the search box should also move to left when the search box will expand.
This is the code I am working on
JsFiddle example
<nav class="header-menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</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 on clicking the search box it will expand to the left but menu items are not moving to left.
How can I fix it. Any help or suggestion would be appreciated .
Thanks in advance

Answer 1

You need to use the text-align : right for parent UL
.header-menu ul {
text-align:right;
}
.header-menu ul li {
display: inline-block;
vertical-align: middle;
}
.search-wrap {
width: 175px;
position: relative;
height: 27px;
vertical-align: middle;
display: inline-block;
border: 1px solid #ccc;
margin-left: 15px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
.search {
border: none;
padding: 5px 7px;
width: 100%;
}
.search-wrap:focus-within {
width: 225px;
}
If you need some absolute positioning then you can use positioning for nav element and not the li or inner elements.
see this fiddle
https://jsfiddle.net/qz1m5hub/