4.1 · Navigation

Sticky Navbar.

Transparent over the hero, frosted glass after a few pixels of scroll. The most copied navbar pattern on the web.

What it is

A navigation bar that stays fixed to the top of the viewport as the user scrolls. Unlike a static nav that scrolls away with the page, a sticky nav is always accessible no matter how far down the user has scrolled. This is the most common and expected navigation pattern for marketing websites and landing pages.

How it works

position:sticky top:0 keeps the navbar at the top of the viewport when within its parent. A popular enhancement: the navbar starts transparent (showing the hero content behind it), and as the user scrolls even a few pixels, it transitions to a solid or frosted-glass background. Detected by a scroll listener checking if window.scrollY > threshold.

Live demo

Scroll inside the demo. Watch the navbar transition from transparent → frosted glass after ~60px.

Live · scroll inside

Made by hand,
made to outlast.

Field jackets, batch 12. Now shipping.

The story of batch 12

It rained the entire week we cut the cloth. We are not particularly superstitious about weather but the dyers held the bath one day longer than the schedule said, just to be sure. The result, you can hold in your hands.

Every piece in batch 12 is sewn from a single bolt of waxed cotton that we sourced from a mill in Lancashire that has been making this cloth for 109 years. The mill is older than the company that buys it. We do not know if this is good or bad. We know it makes the jacket softer over time.

If you scroll past the headline at the top of this page, you will notice the navigation grew a glass background. That is not why we made the page. But it is a nice thing it does. The eye rests, the navigation stays where it belongs, and you can keep reading.

This is the entire technique: position sticky, a scroll listener, and one CSS class. The rest is restraint.

Transparent

Copy this prompt

Prompt · 4.1 Sticky Navbar
Create a sticky navbar that is transparent at the very top of the page (background:transparent) and transitions to a white frosted-glass background when the user scrolls past 60px (background:rgba(255,255,255,0.85), backdrop-filter:blur(12px), box-shadow: 0 1px 20px rgba(0,0,0,0.08)). Navigation has: logo on the left, 5 nav links in the center, and a CTA button on the right. Add a 0.3s transition on background-color and backdrop-filter. On mobile (under 768px), hide the center links and show a hamburger menu icon instead.

Example sites to study