Pages, menus and popups

Keep the header at the top while visitors scroll

Make your logo and menu stay on screen as visitors scroll, and shrink the header so it takes up less room.

A sticky header stays in view while visitors scroll down the page, so your logo and menu stay in view. On a long page, nobody has to scroll back up to find them.

Keep the header in place

  1. Log in to your site editor.
  2. Hover over the header and click Header.
  3. Click Edit Design.
  4. Open the Position section.
  5. Turn on Set as sticky header.
  6. Check the computer, tablet and phone views. Turning it on for one size affects the others.
  7. Publish. If you don't see a Publish button, tell us and we'll publish it for you.

Make it shrink as visitors scroll

A shrinking header gives up some height after the visitor scrolls, so it covers less of your page. Sticky has to be on first.

  1. In the Position section, turn on Change header on scroll.
  2. Set how it looks:
    • Padding: the space above and below at the start.
    • BG on scroll: the background color and how see-through it is.
    • Spacing on scroll: the space above and below once it shrinks.
    • Logo size: how small the logo gets when the header shrinks. The standard is 66 percent.
    • Show only nav section on scroll: keeps only the menu row visible. Only available on advanced headers.
  3. Publish.

Good to know

  • Not everything in a header can shrink. Menus, logos, buttons, social icons, call and email buttons, and title and paragraph text do. Anything else may show as a blank gap.
  • You won't see it work on a short page that doesn't scroll. Test on a longer page.
  • Look at the phone view to be sure the header isn't taking up too much room.

Need a hand?

Email hello@zossoz.com with your business name and whether you'd like the header sticky, shrinking or both, and we'll take care of it. We reply within one business day. See Request a change.

Last reviewed