Standard Sticky Nav

About this block

Standard Sticky Nav is the dependable default header. A full width sticky bar with a bottom border and backdrop blur holds the logo on the left, five inline links in the middle, and a ghost sign in beside a solid CTA on the right. Below the large breakpoint the links and CTAs collapse into a hamburger that opens a slide in sheet with the same items.

The links are one array shared by the desktop nav and the mobile sheet, so the navigation cannot drift out of sync. The logo is a primary colored square with a letter beside a wordmark, swap both for your brand in one place. The bar stays readable over any content thanks to the blur and translucent background.

When to use

Reach for this block when the page needs a header that disappears into familiarity, most marketing sites should start here. Its siblings are opinions, pill-nav and dark-nav set a mood, double-deck-nav adds an information layer, this one just works. Pair it with any hero, the heroes in this collection deliberately ship without their own headers.

A natural flow around it on a Marketing Pro page:

Before

• Nothing. This is the first block on the page.

After

• Heroes to open the page under the bar
• Banners above it if a launch deserves an announcement line

What you can display

One strong use is the five page marketing site: product, solutions, pricing, customers, docs. Other arrangements:

• Product led. Drop sign in to a link and make the CTA open the app for returning users.
• Sales led. Swap the solid CTA to book a demo and let the ghost button carry the trial.
• Docs site. Lead the links with documentation sections and tone the CTA down to a single action.

Tip: keep desktop links to five, the sheet can carry more on mobile but the bar starts crowding beyond that.