Адаптивное меню
Вот так вот получается
Скрин - 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;
}
}
}
}
|
А как должно быть.
По картинке никто не поймет, что там у вас в <header>. Код нужен, а не картинка. |
Редактировал, посмотрите пожалуйста
|
<style>
.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:900px) {
.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;
}
}
}
}
</style>
<body>
<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">
<div class="burger-1 burger-1-mod-1"></div>
<div class="burger-1 burger-1-mod-2"></div>
<div class="burger-1 burger-1-mod-3"></div>
</div>
</div>
</div>
</header>
</body>
Ну они так и отображаются в том коде, что представлен. Тут правда max-width пришлось поменять |
Спасибо
|
| Часовой пояс GMT +3, время: 11:14. |