Navigation on two screens
Five ways to move around the site, from a quiet header to a full-screen index.
Selected direction
Visible tabs on desktop. Editorial menu on mobile.
What we kept
The final header combines two studies. Desktop links stay visible. On mobile, a three-line button opens large numbered links. The theme toggle stays inside the menu, with the original icons and reveal animation.
- Keep the logo in the same position when the menu opens.
- Use the same frosted glass treatment for the menu booking link.
- Shorten the mobile booking label to Book a call.
- Use Motion for opening and closing, with reduced-motion support.
The frame preserves the comparison. Booking actions inside it are simulated. The site navigation above remains available.
Notes from the build
A blog post about these decisions is being drafted. It covers the menu alignment, animation interruptions, and the difference between centering text and centering the whole button label.