How to make a responsive navigation
Short answer
The simplest approach is to let the items wrap to a new line:
<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>Scrolling sideways
Instead of wrapping, keep the items on one line and let it scroll with a finger — many shops and news sites do this:
<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>A column on a phone
On a narrow screen the items can stack, and on a wide one sit in a row:
.menu { display: flex; flex-direction: column; }
@media (min-width: 600px) { .menu { flex-direction: row; } }If there are many items, hide them behind a hamburger button — there is a separate answer about making a hamburger menu without JavaScript.
Common mistake
A menu with fixed-width items overflows a phone screen and makes the whole page scroll. Do not give the links a width; allow wrapping or scrolling inside the menu itself.
Functions used in this recipe
- <nav> — A block of main navigation: the site menu, a table of contents, breadcrumbs.
- flex-wrap — Whether flex items may wrap onto new lines.
- @media — Applies rules only under given conditions — the window width, the system theme and others.
- overflow — What to do with content that does not fit into the element.