Navigation is the first thing that needs to work on a phone.
Direct answer
Build navigation with a nav element and a list of links. On small screens, hide the list and show a toggle button. On wider screens, show the links in a row. Use aria-expanded and a real button so the menu is accessible.
HTML
<nav aria-label="Main">
<button class="menu-btn" aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" class="menu">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
CSS
.menu { display: none; list-style: none; padding: 0; }
.menu.open { display: block; }
@media (min-width: 768px) {
.menu-btn { display: none; }
.menu { display: flex; gap: 24px; }
}
JavaScript
const btn = document.querySelector(".menu-btn");
const menu = document.querySelector("#menu");
btn.addEventListener("click", () => {
const open = menu.classList.toggle("open");
btn.setAttribute("aria-expanded", String(open));
});
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
A button, a list and one media query cover most sites.
