Как сделать шапку сайта в 2026: код, адаптив и промпты

Q: Нужен ли JavaScript, чтобы сделать шапку?

Нет. Раскладка делается на display: flex, липкость на position: sticky, бургер собирается на тегах и . Скрипт понадобится только для дополнительных эффектов: например, чтобы шапка пряталась при прокрутке вниз и появлялась при прокрутке вверх.

Q: Липкая шапка не работает, что проверить?

Две вещи. Первое: задано ли top: 0, без него position: sticky ведёт себя как обычное позиционирование. Второе: нет ли у родительского блока overflow: hidden, scroll или auto, это самая частая причина, по которой шапка «отклеивается».

Шапка сайта это верхняя полоса страницы, в которой обычно стоят логотип, меню и одна кнопка действия. Собрать её реально за десять минут, даже если вы не писали код раньше. Ниже готовая разметка со стилями, правила для телефона, разбор липкой шапки, три промпта для ИИ и короткая проверка на ширине 320 пикселей.

Что входит в шапку и зачем она нужна

Шапка отвечает на три вопроса человека, который только что открыл страницу: куда он попал, что тут есть и что делать дальше. В HTML для неё есть отдельный тег <header>: по описанию MDN это вводный блок, куда кладут логотип, навигацию, форму поиска и имя автора.

Логотип или название компании, обязательно ссылкой на главную. Люди по привычке кликают в левый верхний угол, чтобы вернуться в начало.
Меню из 4-7 пунктов, названных словами клиента («Цены», «Как работаем»), а не внутренними терминами.
Одно целевое действие: «Записаться», «Оставить заявку», «В корзину». Кнопка одна, две равнозначные размывают выбор.
Контакт, если по нему реально звонят: номер телефона или мессенджер. На телефоне номер стоит делать ссылкой tel:, как мы показывали в разборе кликабельных элементов страницы.
Иногда переключатель языка, поиск или корзина. Всё остальное в шапке лишнее и мешает главному действию.

Готовая разметка шапки: HTML и CSS

Код ниже можно вставить в начало файла index.html, а стили положить в style.css или прямо в блок <style> внутри <head>. Если страницы ещё нет вообще, соберите скелет по разбору сайта на HTML и CSS, а потом возвращайтесь сюда.

<header class="site-header">
  <a class="logo" href="/">Мастерская Анны</a>
  <nav class="nav">
    <a href="/uslugi/">Услуги</a>
    <a href="/ceny/">Цены</a>
    <a href="/kontakty/">Контакты</a>
  </nav>
  <a class="header-cta" href="/zapis/">Записаться</a>
</header>

<style>
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.logo { font-weight: 700; text-decoration: none; color: #111; }
.nav { display: flex; gap: 18px; margin-left: auto; }
.nav a { text-decoration: none; color: #333; padding: 8px 4px; }
.header-cta {
  padding: 12px 18px;
  border-radius: 10px;
  background: #111;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 640px) {
  .nav { display: none; }
  .site-header { padding: 10px 14px; }
}
</style>

Что здесь происходит: display: flex выстраивает содержимое шапки в строку, margin-left: auto у блока .nav отжимает меню вправо, gap задаёт расстояния без лишних отступов, border-bottom отделяет шапку от контента. Медиазапрос на 640 пикселей прячет горизонтальное меню на телефоне, и вместо него нужен бургер.

Шапка это одна деталь страницы. Собрать сайт целиком получается заметно быстрее, когда рядом есть понятный порядок действий.

Занять место

Шапка на телефоне: бургер и размер кнопок

На узком экране три вещи не помещаются рядом, поэтому меню сворачивают в бургер (кнопку из трёх полосок), а на виду оставляют логотип и одно действие. Реализацию бургера без единой строчки скриптов, на тегах <details> и <summary>, мы подробно разбирали в статье про меню на сайте, поэтому здесь не повторяемся.

Важнее то, во что человек будет попадать пальцем. По критерию 2.5.8 стандарта WCAG 2.2 интерактивный элемент должен занимать не меньше 24 на 24 CSS-пикселей или иметь такой же отступ до соседних кнопок. Это минимум, а не цель: запас по высоте примерно до 44 пикселей делает попадание пальцем спокойным, без промахов по соседнему пункту.

Кнопку действия на телефоне оставляйте в шапке, а не прячьте в бургер: до неё должно быть один тап.
Иконка бургера сама по себе маленькая, но её кликабельную область увеличивают отступами padding.
Пункты меню внутри раскрытого бургера ставьте в столбик с высотой строки побольше, промахи чаще всего случаются именно там.

Общие правила адаптива собраны в разборе мобильной версии сайта: шапка ломается на телефоне первой, но не единственной.

По теме: Как сделать сайт отзывов в 2026: блок, страница и разметка

Липкая шапка: когда помогает, а когда мешает

Липкая шапка остаётся на экране при прокрутке. Делается она одной строкой position: sticky, но у неё есть два подводных камня. Первый: по документации MDN обязательно нужно задать хотя бы одно из свойств top, right, bottom или left, иначе элемент ничем не отличается от обычного position: relative. Второй: элемент прилипает к ближайшему предку с механизмом прокрутки, и если у родительского блока стоит overflow: hidden, липкость просто не сработает.

Помогает: длинные страницы, магазин с корзиной, лендинг, где кнопка нужна в любой момент чтения.
Мешает: короткая страница в один-два экрана, где шапка просто отнимает место.
Мешает вдвойне: высокая шапка на телефоне. Полоса в 80-90 пикселей на маленьком экране забирает заметную часть текста, и человек читает как через щель.
Мешает при якорях: заголовок, к которому ведёт ссылка, уезжает под шапку.

Последнее лечится свойством scroll-margin-top у заголовков: оно резервирует отступ сверху при переходе по якорю. Значение ставят примерно равным высоте шапки.

Шапку полезно проверять не на макете, а на своём телефоне: откройте черновик, возьмите телефон одной рукой и попробуйте дотянуться большим пальцем до кнопки. Половина правок рождается за эти двадцать секунд.

Разметку и стили ИИ соберёт за минуты, сложнее решить, какие блоки нужны странице и как довести её до живого адреса. На бесплатном вебинаре по вайбкодингу сайт собирают целиком, от первого промпта до публикации, и отдают гайд в подарок.

Записаться на вебинар

Три промпта, чтобы шапку собрал ИИ

Нейросеть соберёт шапку сама, если в задании есть четыре вещи: что за сайт, какие пункты меню, какое действие в кнопке и как всё ведёт себя на телефоне. Промпты ниже работают и в чате (Claude, ChatGPT, Gemini, Алиса), и в редакторах для вайбкодинга. Подставьте свои названия и скопируйте.

Промпт 1. Шапка с нуля

«Сделай шапку сайта для студии маникюра. Слева название «Мастерская Анны» ссылкой на главную, в центре меню из четырёх пунктов: Услуги, Цены, Работы, Контакты. Справа кнопка «Записаться». Верни один файл index.html с разметкой и стилями внутри, без библиотек и фреймворков, только HTML и CSS. Шрифты системные, цвета светлые, кнопка тёмная. Добавь короткий комментарий над каждым блоком стилей, чтобы я понимала, что за что отвечает».

Промпт 2. Адаптив и бургер

«Доработай эту шапку под телефон. На ширине до 640 пикселей меню прячется в бургер, который раскрывается по клику без JavaScript, на тегах <details> и <summary>. Логотип и кнопка «Записаться» остаются видимыми. Кликабельная область бургера не меньше 44 пикселей по высоте и ширине. Проверь, что при ширине 320 пикселей ничего не вылезает за экран и нет горизонтальной прокрутки».

Промпт 3. Правка готовой шапки

«Вот моя текущая шапка (код ниже). Сделай её липкой при прокрутке через position: sticky, добавь лёгкую тень, когда страница прокручена, и scroll-margin-top заголовкам, чтобы якорные ссылки не уезжали под шапку. Ничего кроме шапки не меняй, остальной код верни как есть».

Если ИИ прислал всё одним куском, попросите разложить по файлам: разметку в index.html, стили в style.css. И сразу задайте вопрос «что именно ты изменил», иначе после третьей правки будет непонятно, откуда взялся лишний отступ.

По теме: Как сделать презентацию сайтом в 2026: ссылка вместо файла

Как проверить шапку за пять минут

Откройте страницу в браузере и включите режим устройств: клавиша F12, затем Ctrl+Shift+M (на Mac Cmd+Shift+M). В поле ширины введите 320. Это та самая узкая граница, на которой страница обязана оставаться пригодной по критерию 1.4.10 WCAG.
Проверьте, ездит ли страница вбок. Горизонтальной прокрутки быть не должно: чаще всего её создаёт как раз длинное название в шапке или меню, которое не свернулось.
Прокрутите страницу вниз до середины. Липкая шапка не должна перекрывать заголовки и первую строку текста.
Нажмите на логотип: он обязан вести на главную, а не оставаться картинкой.
Откройте сайт на своём телефоне и нажмите кнопку действия и пункты меню пальцем, а не мышкой. Промахи видны сразу.

Частые ошибки в шапке

Логотип не кликается. Самая частая и самая дешёвая в починке ошибка.
Меню из десяти-двенадцати пунктов. Человек не выбирает, а теряется, и уходит листать страницу.
Две или три одинаково заметные кнопки. Оставьте одну главную, остальное убирайте в текст или в меню.
Шапка высотой в треть экрана телефона. Особенно больно, когда она ещё и липкая.
Прозрачная шапка поверх фотографии: на первом экране красиво, а при прокрутке текст меню сливается с картинкой.
Забытый z-index: шапка уезжает под изображения, карту или всплывающее окно.
Бургер на большом экране. Прятать меню там, где места полно, значит терять переходы.

Частые вопросы

Чем шапка отличается от меню?

Шапка это контейнер, верхняя полоса страницы. Меню это один из её элементов. Кроме меню в шапке живут логотип, кнопка действия и контакты, а само меню технически может стоять и сбоку, и в подвале.

Нужен ли JavaScript, чтобы сделать шапку?

Нет. Раскладка делается на display: flex, липкость на position: sticky, бургер собирается на тегах <details> и <summary>. Скрипт понадобится только для дополнительных эффектов: например, чтобы шапка пряталась при прокрутке вниз и появлялась при прокрутке вверх.

Какой высоты делать шапку?

Ориентируйтесь не на цифру, а на долю экрана: на телефоне липкая шапка не должна занимать больше десятой части высоты, иначе читать текст неудобно. На компьютере запас есть, но раздувать её всё равно незачем.

Липкая шапка не работает, что проверить?

Две вещи. Первое: задано ли top: 0, без него position: sticky ведёт себя как обычное позиционирование. Второе: нет ли у родительского блока overflow: hidden, scroll или auto, это самая частая причина, по которой шапка «отклеивается».

Шапка это первый видимый блок, но сайт продаёт целиком: структура, тексты, форма заявки и публикация. На бесплатном воркшопе «Сайты с ИИ» показывают, как собрать такой сайт с нуля и брать за это деньги.

Смотреть воркшоп