<header class="header">
<div class="container header__container">
<div class="row">
<div class="col-12 header__content">
<div class="header__menu" id="burger">
<span class="menu__span"></span>
<span class="menu__span"></span>
<span class="menu__span"></span>
</div>
<svg class="header__svg" width="94" height="21" viewBox="0 0 94 21" fill="none" xmlns="http://www.w3.org/2000/svg">
</svg>
<div class="header__block" id="menu">
<nav class="header__nav">
<ul class="header__list">
<li class="header__item">
<a href="#" class="header__link">
Главное
</a>
</li>
<li class="header__item">
<a href="#" class="header__link">
О нас
</a>
</li>
<li class="header__item">
<a href="#" class="header__link">
Преподаватели
</a>
</li>
<li class="header__item">
<a href="#" class="header__link">
Курсы
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
.header {
background-color: var(--blue);
}
.header__container {
padding-top: 29px;
padding-bottom: 29px;
}
.header__content {
display: flex;
justify-content: space-between;
}
.header__svg {
flex-shrink: 0;
}
.header__list {
display: flex;
justify-content: center;
}
.header__item:not(:last-child) {
margin-right: 57px;
}
.header__link {
color: var(--white);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.header__menu {
display: none;
position: absolute;
background-color: inherit;
left: 4%;
min-width: 40px;
min-height: 24px;
cursor: pointer;
z-index: 10;
border: none;
outline: none;
}
.menu__span {
position: absolute;
background-color: #fff;
width: 25px;
height: 2px;
left: 0;
transition: transform .3s ease-in-out ,opacity .1s ease-in-out, background-color .1s ease-in;
will-change: transform;
}
.menu__span:first-child {
transform: translateY(-10px);
}
.menu__span:nth-of-type(3) {
transform: translateY(10px);
}
/* Rect */
.header.open .menu__span:first-child {
transform: translateY(0) rotate(45deg);
}
.header.open .menu__span:nth-of-type(2) {
opacity: 0;
}
.header.open .menu__span:nth-of-type(3) {
transform: translateY(0) rotate(-45deg);
}
.header__menu:active .menu__span {
background-color: black;
}
@media (max-width: 767px) {
/* Header */
.header__content {
flex-direction: column;
align-items: center;
}
.header__block {
margin-top: 32px;
}
.header__item:not(:last-child) {
margin-right: 30px;
}
Медиа запрос по факту применяется но не на том пикселе который указан в запросе,а на пиксель ниже.Т.е свойства в данном запросе применяются на ширине экрана 766 пикселей.В медиа меняю ширину делаю 766 стили применяются на 765-ом пикселе,но интересное то что на брейкпойнте 992 пикселя у меня все работает как надо,начиная с максимальной ширины 992.И в devtools даже не показывает что у меня есть медиа запрос.Мета,вюпорт проверял,опечатки проверял,подключен бутстрап,вложенность по классам не делал вроде