Quick implementation
/* HTML: <header class="topnav"><a class="topnav__logo">Brand</a><nav class="topnav__links">...</nav></header> */
.topnav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem clamp(1rem, 4vw, 3rem);
background: oklch(0.98 0.01 260 / 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid oklch(0.92 0.02 260);
}
.topnav__logo {
font-weight: 800;
font-size: 1.1rem;
text-decoration: none;
color: inherit;
}
.topnav__links {
display: flex;
gap: 1.5rem;
}
.topnav__links a {
font-size: 0.85rem;
color: oklch(0.55 0.03 260);
text-decoration: none;
transition: color 0.2s ease-out;
}
.topnav__links a:hover { color: oklch(0.2 0.02 260); }
.topnav__links a[aria-current] {
color: oklch(0.52 0.22 265);
font-weight: 600;
}Prompt this to your LLM
Includes role, constraints, and responsive approach.
You are a senior frontend engineer building a site header.
Goal: A sticky top navigation bar with logo and links.
Technical constraints:
- position: sticky + top: 0 + z-index: 100.
- Semi-transparent background with backdrop-filter: blur(12px) for glass effect.
- Flexbox: justify-content: space-between for logo-left / links-right.
- Responsive padding: clamp(1rem, 4vw, 3rem).
- Link active state: use aria-current="page" attribute, style with [aria-current].
- oklch() colors for text and borders.
- Transition color on link hover (0.2s ease-out).
- Include dark-mode colors via light-dark() or @media (prefers-color-scheme: dark).
Mobile approach (describe but don't implement unless asked):
- Hide links behind a hamburger at < 40rem.
- Use :has() or checkbox hack for toggle.
Return HTML + CSS.Why this matters
The top nav is on every page of your site — it needs to be fast, accessible, and consistent. position: sticky keeps it visible on scroll. backdrop-filter: blur() lets content show through for a modern glass effect. The entire component is pure CSS — no JavaScript for the desktop version.
The logic
position: sticky; top: 0 pins the nav to the viewport top when scrolling past it. The semi-transparent background (oklch(... / 0.85)) combined with backdrop-filter: blur(12px) creates the frosted-glass look. clamp() for padding gives responsive horizontal spacing without media queries. aria-current="page" is the semantic way to mark the active link.
Accessibility & performance
Use <nav> with an aria-label for screen readers. Mark the current page link with aria-current="page" — screen readers announce "current page" and you can style it with [aria-current] in CSS. backdrop-filter is compositor-friendly but costs GPU memory — use it on one element (the nav), not dozens.