, внутри – список
<button class="burger" data-menu="toggle">
<span></span>
</button>
Обрати внимание на порядок элементов: лого слева, навигация справа. Для мобильных экранов – иконка бургера в углу. Такой подход упростит адаптацию под разные разрешения.
Проверь, чтобы вёрстка не ломалась при изменении контента. Добавь обёртки с max-width и отступами:
<div class="header-container">
<!-- содержимое шапки -->
</div>
CSS потом подстроишь, но основа уже готова к любым изменениям дизайна. Главное – не усложняй разметку лишними div-ами.
Стилизация шапки через CSS для десктопной версии
Фиксируйте верхнюю часть веб-страницы: добавьте position: fixed; и top: 0; к блоку с меню. Это предотвратит его исчезновение при прокрутке. Ширину задайте как 100%, а фон – через background-color или градиент.
Работа с навигацией
Для списка ссылок используйте display: flex; с выравниванием по центру (justify-content: center). Отступы между пунктами – минимум 20px (gap: 20px;). Шрифт выбирайте без засечек (например, font-family: 'Roboto', sans-serif;), размер – от 16px.
Пример для hover-эффектов:
nav a:hover {
color: #ff5722;
border-bottom: 2px solid currentColor;
}
Логотип разместите слева, добавив margin-right: auto; контейнеру меню. Для тени под шапкой подойдет box-shadow: 0 2px 10px rgba(0,0,0,0.1);.
Нужен контент с идеальным балансом ключевых слов? Купить текст с ключевыми словами – быстрый способ улучшить SEO. А если бюджет ограничен, попробуйте заказать тексты дешево без потери качества.
Важно: проверяйте верстку в разных браузерах. Добавьте @media-запросы для плавной адаптации на экранах меньше 1200px.
Добавление адаптивности через медиазапросы
Задайте брейкпоинты в CSS для разных устройств. Например, для мобильных экранов часто используют 768px, а для планшетов – 1024px. Это основа отзывчивости.
Для ширины меньше 768px спрячьте сложное меню за иконкой «гамбургера».
Уменьшите отступы и размер шрифта заголовков на узких экранах.
Замените горизонтальную навигацию на вертикальную, если пространства мало.
Пример кода:
@media (max-width: 768px) {
.menu { display: none; }
.hamburger { display: block; }
.logo { width: 120px; }
}
Проверяйте дизайн в инструментах разработчика Chrome. Меняйте размер окна – сразу видно, где нужна адаптация. Если элементы налезают друг на друга или текст плохо читается, добавьте новый медиазапрос.
Используйте относительные единицы (%, vw, rem) вместо фиксированных пикселей. Так веб-страница будет плавно масштабироваться. Для шапки часто хватает трёх брейкпоинтов: мобилки, планшеты, десктопы.
Создание мобильного меню-бургера
Разметка: Для начала добавь в html структуру: кнопку-триггер и скрытый блок с пунктами. Вот пример:
Стилизация: В css спрячь стандартное меню на малых экранах, а кнопку сделай заметной. Добавь плавное раскрытие:
css
.mobile-menu {
display: none;
position: fixed;
top: 80px;
left: 0;
width: 100%;
background: #fff;
padding: 20px;
}
.burger-btn {
width: 30px;
height: 20px;
position: relative;
background: transparent;
border: none;
cursor: pointer;
}
.burger-btn span {
display: block;
height: 2px;
background: #333;
margin-bottom: 5px;
transition: transform 0.3s ease;
}
/* Анимация при открытии */
.burger-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.burger-btn.active span:nth-child(2) {
opacity: 0;
}
.burger-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.mobile-menu.active {
display: block;
}
Добавляем интерактивность
Подключи JavaScript или воспользуйся псевдоклассом :target для переключения состояний. Самый простой вариант:
javascript
document.querySelector(‘.burger-btn’).addEventListener(‘click’, function() {
this.classList.toggle(‘active’);
document.querySelector(‘.mobile-menu’).classList.toggle(‘active’);
});
Фикс для отзывчивости: Убедись, что меню не конфликтует с десктопной версией. Используй медиазапросы:
css
@media (min-width: 992px) {
.burger-btn {
display: none;
}
.mobile-menu {
display: flex !important;
position: static;
background: transparent;
}
}
Проверь, как выглядит верстка на разных устройствах – иногда нужно подкорректировать отступы или размер шрифтов. Если элементы «прыгают» при открытии, задай фиксированную высоту для шапки.
Тестирование и финальная настройка шапки
Проверьте отзывчивость меню на разных устройствах – от смартфонов до широкоформатных мониторов. Откройте инструменты разработчика в браузере (F12) и протестируйте поведение элементов при изменении ширины экрана. Если пункты наезжают друг на друга или ломается дизайн – добавьте медиазапросы в CSS.
Детали, которые часто упускают
Убедитесь, что кнопки и ссылки в шапке легко нажимаются на мобильных устройствах. Оптимальный размер для тач-интерфейсов – от 48×48 пикселей. Проверьте скорость загрузки: тяжелые изображения или сложные скрипты могут замедлять отображение верхней части веб-страницы.
Подберите контрастные цвета для текста и фона – это критично для пользователей с ослабленным зрением. Простой способ проверить: сделайте черно-белый скриншот шапки. Все элементы должны оставаться различимыми.
Нужны примеры удачных решений? В наших статьях для блогов написать недорого есть разборы реальных кейсов. А если важно продвижение – посмотрите коллекцию недорогих SEO-статей с рабочими приемами верстки.
Финишный штрих: попросите коллег или друзей протестировать шапку на своих устройствах. Свежий взгляд часто выявляет недочеты, которые вы могли пропустить.
