Przejdź do treści

Quick answer · Building a website · 2 min read

How do I make a sticky header in Wix Studio Two?

Select the header and give it the Freeze scroll effect. Wix recommends this rather than setting the header's position type to Pinned. Freeze keeps the header at the top while visitors scroll, on every page that uses it.

Wix Studiowix studio twoheaderscroll effectsnavigationBy Matt · Updated 3 November 2026 · Reviewed by Maciej (Matt) Konarzewski

Key points

  • Use the header's Freeze scroll effect to keep it fixed.
  • Disappear and Fade out hide the header as visitors scroll.
  • Sticky and Pinned position types are for other elements and sections.

Select the header and give it the Freeze scroll effect. Wix recommends this rather than setting the header's position type to Pinned. Freeze keeps the header at the top of the screen while visitors scroll, on every page that uses that header, and you can make it change colour as they scroll.

How do you set it up?

  1. Click the header on the canvas.
  2. Click Change Behavior on the action bar, then Scroll effect.
  3. Choose Freeze.
  4. Open All design options, then Header settings, to set the overlap and the colour while scrolling.
  5. Preview the site and scroll down a long page to check the header stays in place and stays readable over every section.

Overlap decides whether the header sits over the content: None, with a top offset, or Next section.

What are the other header effects?

  • Scroll with site is the default. The header scrolls away. Choose it to remove an effect without losing the header's design.
  • Disappear hides the header as visitors scroll, with settings for direction, distance, delay and timing.
  • Fade out fades the header away, with delay and duration settings.

What about Sticky and Pinned?

Those are position types for other elements, under All design options on the action bar. Sticky holds an element once it reaches the edge of the screen, and you can override it on smaller breakpoints. Pinned keeps an element visible all the time, applies on every breakpoint, and only works for sections at the top or bottom of a page.

If you'd like your navigation built and tested across screens, see our Wix Studio 2 service.

Sources

  1. Studio Two Editor: Adding a Scroll Effect to the Header (Wix)
  2. Studio Two Editor: Adjusting Position and Spacing (Wix)

Need help with wix studio 2?

Umów bezpłatną rozmowę