DEV Community

Cover image for Should you use sticky headers?
AlbertMarashi
AlbertMarashi

Posted on

3 4

Should you use sticky headers?

When building websites, you should always use sticky headers when possible. Sticky headers stay at the top of the screen and allow users to easily access navigation and contact buttons.

Sticky Headers improve CTR & SEO

In my experience of building websites, and doing SEO Optimisations for Insane Marketing, adding sticky headers to client websites has always increased CTR (click-through-rate) by about 1% which can amount to a higher number of conversions

Some tips:

  • Ensure the header is not large (and doesn't take up a lot of space on mobile screens)
  • If the header is large, make it compacted when the user scrolls down, but don't remove functionality
  • Add a shadow to the header (especially if your header is white, on white background)

Pros

  • Time-saving
  • Good navigation
  • Better branding

Cons

  • Takes up space
  • Can be distracting

Examples

Patrick Clare - Renovations Adelaide

Kitchens Adelaide
Kitchen Adelaide

Patrick Clare Renovations Adelaide had massive improvements in traffic and user engagement which improved SEO after implementing a sticky header

  • Improved CTR by 2%
  • Improved Branding Awareness

Promatia

Promatia saw massive user engagement increases and citizen signups on their government website, this helped them sign up more citizens and increased branding of the organization.

View Promatia's Sticky Header

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️