Вот так вот получается
Скрин -
https://skr.sh/sL7DVWiPFnI?a
Что может быть не так?
Нужно что бы при нажатии на бургер отображались пункты меню на черном фоне.
<header class="header">
<div class="wrapper">
<div class="header__item">
<div class="header__logo">
<a href="#">
<img src="./img/figma/odigo-Logo.svg" alt="">
</a>
</div>
<nav class="navbar">
<ul class="header__list">
<li class="header__link">
<a href="#">Меню</a>
</li>
<li class="header__link">
<a href="#">Меню</a>
</li>
<li class="header__link">
<a href="#">Меню</a>
</li>
<li class="header__link">
<a href="#">Меню</a>
</li>
</ul>
</nav>
<div class="header__burger">
<span class="burger-1 burger-1-mod-1"></span>
<span class="burger-1 burger-1-mod-2"></span>
<span class="burger-1 burger-1-mod-3"></span>
</div>
</div>
</div>
</header>
css
.header {
padding-top: 65px;
position: fixed;
width: 100%;
}
.header__burger {
width: 40px;
height: 28px;
position: relative;
display: none;
.burger-1 {
display: block;
width: 100%;
height: 2px;
position: absolute;
left: 0;
background-color: red;
}
.burger-1-mod-1 {
top: 0;
}
.burger-1-mod-2 {
top: 50%;
}
.burger-1-mod-3 {
bottom: 0;
}
}
@media screen and (max-width:767px) {
.header__burger {
display: block;
}
.header__list {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
z-index: 999;
padding: 75px;
margin-right: 0;
.header__link {
width: 100%;
margin-right: 0;
margin-bottom: 30px;
a {
font-size: 42px;
line-height: 48px;
}
}
}
}
