Возможно, вам подойдёт мой вариант:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#hamb1 {
display: none;
}
.line1, .line2, .line3 {
width: 30px;
height: 5px;
background: black;
position: fixed;
transition: 0.5s;
}
#hamb1 ~ .line1 {
left: 8px;
top: 8px;
}
#hamb1 ~ .line2 {
left: 8px;
top: 18px;
}
#hamb1 ~ .line3 {
left: 8px;
top: 28px;
}
#hamb1:checked ~ .line1 {
transform: rotate(45deg);
left: 20px;
top: 12px;
width: 20px;
}
#hamb1:checked ~ .line3 {
transform: rotate(-45deg);
left: 20px;
top: 24px;
width: 20px;
}
.padding {
position: fixed;
left: 8px;
top: 8px;
width: 30px;
height: 26px;
}
.search {
height: 16px;
width: 150px;
border-right: 4px solid #216558;
border-bottom: 4px solid #216558;
border-top: 4px solid #2B8473;
border-left: 4px solid #2B8473;
border-radius: 4px 0 0 4px;
transition: 0.5s;
position: fixed;
left: 50px;
}
.search:focus {
animation: bigwidth 0.5s 1 linear;
animation-fill-mode: forwards;
}
@keyframes bigwidth {
0% {
width: 150px;
}
100% {
width: 200px;
}
}
.search {
animation: smallwidth 0.5s 1 linear;
animation-fill-mode: forwards;
}
@keyframes smallwidth {
0% {
width: 200px;
}
100% {
width: 150px;
}
}
.button {
height: 26px;
width: 56px;
border-right: 4px solid #216558;
border-bottom: 4px solid #216558;
border-top: 4px solid #2B8473;
border-left: 4px solid #2B8473;
border-radius: 0 4px 4px 0;
transition: 0.5s;
position: fixed;
left: 200px;
}
.search ~ .button {
left: 200px;
}
.search:focus ~ .button {
left: 256px;
}
.logo {
position: fixed;
right: 8px;
border-right: 4px solid #216558;
border-bottom: 4px solid #216558;
border-top: 4px solid #2B8473;
border-left: 4px solid #2B8473;
border-radius: 4px 4px 4px 4px;
}
.search ~ .logo {
opacity: 1;
transition: 0.25s;
}
.search:focus ~ .logo {
opacity: 0;
}
.menu {
position: fixed;
top: 38px;
left: 0px;
right: 0px;
bottom: 0px;
background: linear-gradient(to right bottom, #49E2C4, #216558);
}
.menu a {
color: white;
}
#hamb1 ~ .menu {
display: none;
}
#hamb1:checked ~ .menu {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="hamb1">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<label for="hamb1">
<div class="padding"></div>
</label>
<header>
<input class="search">
<input type="button" class="button" value="Поиск">
<div class="logo">Что-то</div>
</header>
<div class="menu">
<hr>
<a href="#">Ссылка 1</a>
<hr>
<a href="#">Ссылка 2</a>
<hr>
<a href="#">Ссылка 3</a>
В данном коде приведено увеличение формы для Android устройства, однако увеличение input можно изменить и для любого другого устройства при помощи чудесной возможности CSS - calc()
http://htmlbook.ru/css/calc