Build your nav
Preview
Markup
Samples
Everything on
Speedlify scores
Continuously measuring performance of a bunch of sites.
Title only
Details element inclusively hidden
No title at all
Over a colored background
Fluid images
The samples render <p class="demo-nav-title"> so this page keeps a single <h1>, and opt out of sticky so they stay inside their boxes. In a real demo you usually want h1 — pick it in the builder above.
Links inherit the text color with a green underline and turn green on hover, matching zachleat.com. Focus rings use the site's magenta accent — tab through to see them, and to reveal the skip link. Under 30em the links wrap to their own row.