Header

Josh W. Comeau joshwcomeau.com/

Design type: Site header with dropdown menu
Page tags: navigation dropdown dark header mega menu hero 3d illustration icons
Site tags: dark personal developer
Vocabulary: horizontal nav bartwo-tone wordmarkicon button grouplight dropdown panelcaret pointertwo-column icon menu3d character herodashed rainbow arccloud silhouette backdropeyebrow section labelspill category chipsarrow link listsidebar layout
Prompt: Show prompt
Build a dark site header with a compact dropdown menu, sitting over an illustrated hero. Palette: bg #0F1318 fading up to #1A2733 behind layered cloud/hill silhouettes (#1C2530, #222C38). Text #E6E9EE, accent hot pink #FF3D8B for eyebrow labels, wordmark periwinkle #8FA8FF. Dropdown panel near-white #EEF1F5 with dark text #1A1F26. - Bar: ~960px centred, 64px tall, no background. Left: playful two-word wordmark "[First] [Last]" with a tiny doodle between words. Then text links: [Categories] [Courses] [Goodies] [About], 14px. Right: 4 ghost icon buttons (search, sound toggle, theme moon, RSS) 20px icons, 16px gaps. - Dropdown: opens under "Categories" on hover/focus; light rounded panel (8px radius, soft shadow) with a small caret pointing to the trigger. Two columns of 3 items, each a 16px line icon + label, 13px, ~10px row gap. Fades and slides down 4px over 150ms. - Behind/under: a hero with a 3D cartoon character sitting beneath a dashed rainbow arc (rows of rounded dashes in purple, blue, green, yellow, red). - Below: two columns — left a list of [Article title] + muted subtitle + excerpt + "Read more"; right sidebar with pink uppercase eyebrow "BROWSE BY CATEGORY", outlined pill chips, then "POPULAR CONTENT" arrow (→) link list. Responsive: below ~800px collapse links into a hamburger sheet; keep icon buttons.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of Header on Josh W. Comeau