Как сделать адаптивное меню
Короткий ответ
Самое простое — разрешить пунктам переноситься на новую строку:
<style>
.menu { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px; background: navy; }
.menu a { color: white; text-decoration: none; }
</style>
<nav class="menu">
<a href="https://example.com">Home</a><a href="https://example.com">Catalog</a><a href="https://example.com">Delivery</a>
<a href="https://example.com">Reviews</a><a href="https://example.com">Contacts</a>
</nav>Прокрутка вбок
Вместо переноса пункты можно оставить в одну строку и разрешить её прокручивать пальцем — так делают многие магазины и новостные сайты:
<nav style="display: flex; gap: 16px; overflow-x: auto; white-space: nowrap; width: 220px; padding: 8px; background: whitesmoke;">
<a href="https://example.com">News</a><a href="https://example.com">Sports</a><a href="https://example.com">Science</a><a href="https://example.com">Travel</a>
</nav>Столбик на телефоне
На узком экране пункты можно поставить друг под другом, а на широком — в строку:
.menu { display: flex; flex-direction: column; }
@media (min-width: 600px) { .menu { flex-direction: row; } }Если пунктов много, их прячут за кнопкой-гамбургером — об этом отдельный ответ «Как сделать меню-гамбургер без JavaScript».
Частая ошибка
Меню с фиксированной шириной пунктов вылезает за экран телефона и создаёт прокрутку всей страницы. Не задавайте ссылкам width, а разрешите перенос или прокрутку внутри самого меню.