Есть необходимость создать адаптивную шапку сайта с кнопкой гамбургером. В готовых решениях запуталась. Помогите, пожалуйста. Код ниже
.header {
position: fixed;
align-content: center;
left: 100px;
z-index: 1;
opacity: 5;
background: rgba(255, 255, 255, 0.95) none repeat scroll 0 0;
box-shadow: 0 1px 3px rgba(50, 50, 50, 0.4);
left: 0;
margin: auto;
position: fixed;
top: 0;
width: 100%;
}
.header .container {
width: 1200px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.container .row {
margin-left: -15px;
margin-right: -15px;
min-height: 1px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.logotype {
display: flex;
align-items: flex-start;
width: 99px;
padding-top: 7px;
}
.navigation {
display: flex;
flex-direction: row;
align-items: center;
}
#nav-menu {
display: flex;
align-items: center;
}
.main-menu {
display: flex;
flex-direction: row;
font-family: Montserrat;
font-size: 14px;
font-weight: normal;
line-height: 25px;
color: #333;
text-transform: uppercase;
list-style: none;
}
.searching {
display: flex;
flex-direction: row;
align-items: center;
}
.main-menu>li>a {
color: #333;
display: block;
font-family: Montserrat;
line-height: 35px;
padding: 28px 17px;
text-transform: uppercase;
text-decoration: none;
outline: medium none;
background-color: transparent;
}
.main-menu>li:hover>a,
.main-menu>li a.active {
color: #cc3333;
}
.main-menu>li:hover {
background: #ccc none repeat scroll 0 0;
}
.input-box {
position: relative;
}
.input-box input {
background: transparent none repeat scroll 0 0;
border: 1px solid #ccc;
color: #999;
display: block;
font-size: 14px;
height: 45px;
outline: medium none;
padding: 0 60px 0 15px;
}
.src-btn {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #999;
height: 45px;
line-height: 45px;
position: absolute;
right: 10px;
top: 7px;
transition: all 0.3s ease 0s;
-webkit-appearance: button;
cursor: pointer;
overflow: visible;
}
.src-btn img {
width: 25px;
}
<header class="header">
<div class="container">
<div class="row">
<div class="logotype">
<img src="images/stiker.png">
</div>
<div class="navigation">
<nav id="nav-menu">
<ul class="main-menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Поставщики</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Документы</a></li>
</ul>
</nav>
</div>
<a class="toggle-nav" href="#">☰</a>
<div class="searching">
<form action="#">
<div class="input-box">
<input class="single-input" placeholder="Search" type="text">
<button class="src-btn">
<a href="https://icons8.com">
<img src="https://png.icons8.com/ios-glyphs/50/666666/search.png" />
</a>
</button>
</div>
</form>
</div>
</div>
</div>
</header>