Как сделать шапку css?

Сделайте header с логотипом и nav, затем примените Flexbox. Для контейнера подойдет display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap. Перенос позволяет шапке оставаться в пределах экрана, когда логотип и ссылки уже не помещаются в одну строку.

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

Проверьте длинные подписи, фокус с клавиатуры и увеличенный текст. Если нужен бургер, это отдельное поведение раскрытия, которое требуется реализовать вместе с доступным состоянием кнопки.

Структура Создайте header с логотипом и nav. Например, логотип может быть ссылкой на главную, а внутри nav находятся обычные ссылки разделов. CSS оформляет эти элементы, но не заменяет их смысл.

Базовая раскладка Для шапки подойдет .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem; }. Логотип и навигация смогут занимать разные строки, если вместе перестанут помещаться.

Ссылки Самой навигации можно задать display: flex; gap: 1rem; flex-wrap: wrap. Так длинный список не обязан выходить за экран. Сохраняйте видимое состояние фокуса для клавиатурного перехода и достаточный контраст.

Размер логотипа Если это картинка, задайте подходящую максимальную ширину и сохраните пропорции. Не рассчитывайте, что огромный исходный файл автоматически впишется в узкую область. Текстовый логотип тоже проверьте с длинным названием.

Поведение страницы Начните с шапки в обычном потоке. Тогда содержимое ниже автоматически учитывает ее высоту, включая переносы навигации. Fixed выводит элемент из потока и требует отдельного решения перекрытия, поэтому добавлять его без задачи не нужно.

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

Проверка Посмотрите шапку на узком экране, с увеличенным текстом и длинными названиями пунктов. Убедитесь, что ссылки доступны, логотип не сжимается до нечитаемого состояния, а страница не получила горизонтальную прокрутку. Правки начинайте с причины переполнения, а не с глобального скрытия overflow.