Sticky header

A sticky header is a bar with your logo, menu or main button that stays fixed at the top of the screen while visitors scroll down. It's also called a fixed or persistent header.

When it helps

• Long pages. Visitors can reach the menu or your main button without scrolling all the way back.
• One important action. A "Book now" or "Order" button that is always in view keeps the next step within reach.
• Webshops. A visible basket and search bar help people who are comparing products.

The cost: space

On a phone, the screen is small. A tall sticky header takes part of it on every scroll. Combined with a cookie banner and a browser bar, little space may be left for your actual content. That matters most on the first screen on mobile.

Guidelines

• Keep it low: logo, a menu icon and at most one button.
• Consider making it smaller once visitors scroll, or showing it only when they scroll back up.
• Make sure it doesn't cover headings or links when someone jumps to a section.
• Check that it doesn't overlap with your cookie banner or chat widget.

On StayOrBounce, reviewers see your first screen on a laptop and a phone, so you can see how much room your header leaves for your message.