Navigation is on every page, so it is worth doing well. A good navbar is a clean flex row on desktop and collapses sensibly on mobile. Let us build one using the layout skills you already have.
The desktop navbar
A navbar is a Flexbox row: the logo on one side, links on the other, pushed apart with <code>justify-content: space-between</code>. The links themselves are a nested flex row with a gap.
<nav class="nav"><b class="logo">Atlas</b><div class="links"><a href="#" class="active">Home</a><a href="#">Docs</a><a href="#">About</a></div></nav>.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#0f172a;border-radius:10px}
.logo{color:#fff}
.links{display:flex;gap:6px}
.links a{color:#cbd5e1;text-decoration:none;padding:7px 12px;border-radius:8px}
.links a:hover{background:#1e293b;color:#fff}
.links a.active{background:#2563eb;color:#fff}Sticky navigation
Make the navbar stay visible while scrolling with <code>position: sticky; top: 0</code>. Give it a background and a z-index so content scrolls cleanly underneath.
The mobile menu pattern
On small screens, horizontal links run out of room. The standard pattern: hide the links behind a toggle button, and reveal them as a stacked column when opened. With CSS alone you can use the checkbox hack, or a tiny bit of JS toggles a class. The CSS side is a media query that stacks the links.
<nav class="mnav"><b>Atlas</b><div class="mlinks"><a href="#">Home</a><a href="#">Docs</a><a href="#">About</a></div></nav>.mnav{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#0f172a;border-radius:10px;flex-wrap:wrap}
.mlinks{display:flex;gap:10px}
.mlinks a{color:#cbd5e1;text-decoration:none}
@media (max-width:480px){.mnav{flex-direction:column;align-items:flex-start;gap:10px}.mlinks{flex-direction:column;width:100%}}.nav { width: 1000px; }.nav { display: flex; flex-wrap: wrap; }Leaving fixed widths or no wrapping on a navbar, so links overflow or get cut off on phones. Plan the mobile layout from the start.
Mark the current page link with an .active class and aria-current="page". Make the toggle a real <button> for accessibility, and ensure tap targets are at least 44px.
Build a sticky flex navbar with a logo, three links, hover and active states. Then add a media query so it stacks vertically below 480px.
1. What pushes the logo and links apart?
2. What keeps the navbar visible while scrolling?
3. How should the active page link be marked for accessibility?
- A navbar is a flex row with space-between for logo and links.
- position: sticky; top: 0 keeps navigation visible on scroll.
- On mobile, stack the links with a media query (or a toggle).
- Mark the active link with a class and aria-current.