/
devigor
/
FirstProject
Обзор
Документация
Войти
/
devigor
/
FirstProject
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
css/media/_header_media.css
115 строк
2 KB
devigor
upload files
17 ноя 2025, 08:24
17 ноя 2025, 08:24
0bab7d6
Код
Авторство
О чём код?
/* &медиа запросы для header */ @media (max-width: 991px) { .header__container { flex-direction: column; gap: 20px; padding-left: 20px; padding-right: 20px; } .header__button-menu { display: none; } .header__navigation { width: 100%; justify-content: space-around; } .nav { width: 80%; } .nav__list { justify-content: space-around; } .nav__item { margin-right: 0; } .nav__link { font-size: 18px; } } @media (max-width: 768px) { .header__container { flex-direction: row; justify-content: space-between; gap: 0; padding-left: 10px; padding-right: 10px; } .header__button-menu { display: inline-block; } /* делаем меню по кнопке */ .header__navigation { flex-direction: column; position: absolute; top: 90px; left: -150%; transform: translateX(-50%); background: var(--white-color); width: 90%; border-radius: 0 0 5px 5px; z-index: 1000; } .nav { width: 100%; } .header__navigation.active { left: 50%; } .nav__list { flex-direction: column; } .nav__item { padding: 4px; margin: 4px; background-color: var(--white-color); border: 1px solid var(--text-header-color); border-radius: 5px; } .nav__link { display: block; color: var(--text-header-color); font-size: 15px; } .nav__item:hover .nav__link { color: var(--white-color); background-color: var(--text-header-color); padding: 2px 0; text-align: center; border-radius: 5px; transition: .3s linear; } .header__button { border-radius: 0 0 5px 5px; margin-top: 15px; width: 100%; text-align: center; } } @media (max-width: 575.98px) { .header__container { justify-content: space-between; } .header__navigation { width: 95%; } }