<header class="header">
<div class="container">
<div class="header_wrapper">
<div class="logo-link_wrapper">
<a href="./index.html" class="logo_wrapper">
<img src="./IMG/logo.svg" alt="logo" class="logo">
<span class="logo_text">Декоративная щепа, кора, щебень в Ступино</span>
</a>
</div>
<div class="nav-body">
<nav class="nav">
<ul class="nav-list">
<li class="list-item">
<a href="./index.html" class="nav-link green">Продукция</a>
</li>
<li class="list-item">
<a href="./contacts.html" class="nav-link contacts">Контакты</a>
</li>
</ul>
</nav>
</div>
<div class="phone_wrapper">
<img src="./IMG/phone-icon.svg" alt="phone-icon" class="phone-icon">
<span class="phone-number">+7(985)777-09-66</span>
<button class="call-back_btn">Обратный звонок</button>
</div>
</div>
<div class="burger-menu">
<span></span>
<span></span>
<span></span>
</div>
<div class="nav-body">
<div class="navigation">
<ul class="second-nav-bar">
<li class="second-nav-item">
<a href="./priming.html" class="second-nav-link">Грунт и субстрат</a>
</li>
<li class="second-nav-item">
<span class="delimiter"></span>
</li>
<li class="second-nav-item">
<a href="./mulching.html" class="second-nav-link">Продукция для мульчирования и декора</a>
</li>
<li class="second-nav-item">
<span class="delimiter"></span>
</li>
<li class="second-nav-item">
<a href="./gardening.html" class="second-nav-link">Товары для сада и огорода</a>
</li>
<li class="second-nav-item">
<span class="delimiter"></span>
</li>
<li class="second-nav-item">
<a href="./worms.html" class="second-nav-link">Черви</a>
</li>
</ul>
</div>
</div>
</div>
</header>
.nav-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.burger-menu {
display: none;
width: 30px;
height: 18px;
position: relative;
z-index: 100;
cursor: pointer;
margin-top: 50px;
}
.burger-menu span {
position: absolute;
top: calc(50% - 1px);
left: 0;
width: 100%;
height: 3px;
background-color: #000;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.burger-menu.active span{
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.burger-menu.active span:first-child {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: calc(50% - 2px);
}
.lock {
overflow: hidden;
}
.burger-menu.active span:last-child {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
bottom: calc(50% - 1px);
}
.burger-menu span:first-child {
top: 0;
}
.burger-menu span:last-child {
top: auto;
bottom: 0;
}
@media (max-width: 900px) {
.nav-list {
position: absolute;
z-index: 3;
left: 27%;
top: 20%;
}
.burger-menu {
display: block;
}
.nav-link {
font-size: 25px;
}
.nav-body {
position: absolute;
top: 0;
left: -100%;
height: 100vh;
width: 100%;
background-color: #FFF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
}
@media (max-width: 650px) {
.nav-list {
position: absolute;
z-index: 100;
left: 27%;
top: 20%;
}
.map {
width: 500px;
margin: 0 auto;
}
.nav-link {
font-size: 16px;
}
.nav-body {
position: absolute;
z-index: 3;
top: 0;
left: -100%;
height: 100vh;
width: 100%;
background-color: #FFF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.second-nav-link {
font-size: 20px;
line-height: 50px;
}
}
<div class="card-wrapper swiper-wrapper">
, но они находятся вне его