Skip to main content

Fixed header overlapping with your design

Learn why a fixed-position header may overlap with headings or images on your page, and how to fix it by adding spacing equal to the header's height.

When you use a fixed header, it stays visible at the top of the screen as visitors scroll.

As a result, headings or images near the top of the page may end up hidden behind the header.

Why the header overlaps with your content

A fixed header sits on a separate layer above your regular page layout, anchored to the top of the screen.

If a section directly below the header — or the destination of an anchor link — isn't positioned with the header's height in mind, headings and images can end up hidden behind the header.

Adjust the spacing on sections that overlap with the header

You can prevent overlap by adding space at the top of the affected section that's about the same height as the header.

Do the same for anchor link destinations — add space at the top of the target section so headings and images don't get hidden behind the header.

  1. Get a rough idea of the height of your fixed header.

  2. Select the section that's overlapping with the header.

  3. In the right panel, open the [Box] tab. If the panel is closed, open the right panel first.

  4. Under [Layout], find the padding settings and set the top value to match or exceed the header's height.

  5. Do the same for any sections used as anchor link destinations — add top padding as needed to push them below the header.

  6. If you're editing a live site, update your site to publish your changes.

Did this answer your question?