Start with the shape
Read the figure
The numbered parts explain the decisions behind the composition. Read the relationships first; the colors are simply there to make the structure visible.
Keep essential destinations available while the content scrolls.
- 01Persistent bar
Essential navigation stays in a predictable viewport position.
- 02Reserved offset
Space beneath the bar prevents the first content from being covered.
- 03Scrolling content
The page and its anchor destinations remain readable below the bar.
How the pattern works
Fixed navigation stays attached to the viewport while the rest of the page moves. It helps on long pages or multi-section sites when people need frequent access to a small set of important destinations.
Fixed and sticky positioning are related but different. A fixed element leaves normal document flow, so the page needs a deliberate offset. A sticky element keeps its place in the flow and is constrained by its scrolling ancestor.
Where it fits—and what to consider
A useful choice when
- A page is long enough to benefit from persistent navigation.
- People frequently move between sections or site areas.
- A small number of important destinations can stay visible.
Be deliberate about
- A tall fixed bar can consume too much space on a small screen.
- Anchor links and keyboard focus must not land underneath the bar.
Adapt the relationship, not just the size
A useful mobile layout preserves the task and content order while changing how the regions share space.
On wider screens
Keep the navigation height predictable and reserve that space in the page. Add scroll offsets to headings used as anchor targets.
On narrower screens
Keep the bar compact, retain the most useful actions, and disclose secondary links. Recheck the reserved offset if the navigation height changes.
Build the structure
- 01Choose which destinations deserve persistent space.
- 02Reserve the navigation height in the document layout.
- 03Test anchor jumps, text resizing, and keyboard focus.
:root { --nav-height: 4rem; }
.site-nav {
position: fixed;
inset: 0 0 auto;
height: var(--nav-height);
z-index: 50;
}
main { padding-top: var(--nav-height); }
[id] { scroll-margin-top: calc(var(--nav-height) + 1rem); }Adapt the content, spacing, and breakpoints to your page. This example illustrates the structure, not a complete application.
A small design exercise
Try it yourself
Jump to the final heading of a long page. Check that the heading and keyboard focus remain visible below the fixed navigation, including after increasing text size.
See a worked example
Inspect a complete page using this pattern, then connect its content regions back to the annotated figure.
Open the example page
Put the pattern into practice
Use the layout prompt as a starting brief, then adapt it to your real content and the decisions covered in this guide.
Read the AI layout prompt
Select the text below and copy it into your AI tool. Replace example content with your own.