A header set to a fixed position stays at the top of the screen even while scrolling, which can cause headings or images below it to be partially hidden behind the header's height.
You can fix this overlap by adding padding equal to or greater than the header's height above the hidden element.
Why headers overlap with content
A header set to fixed position is displayed as a separate layer on top of your normal layout, at the top of the screen.
Sections near the top of the page are placed without accounting for the header's height, so they end up hidden behind the header.
When you navigate using an anchor link, the page scrolls so that the top edge of the target element aligns with the very top of the screen. As a result, the target element gets hidden behind the header.
When a section near the top of the page overlaps with the header
Set the top padding of the section that overlaps with the header to a value equal to or greater than the header's height.
Select the header that's set to a fixed position and check its height.
Select the section that overlaps with the header.
Open [Box] in the right panel. If the panel is closed, open the right panel first.
Under [Layout], in the padding settings, set the top value to equal or exceed the header's height.
Update your site from the publish panel. Your changes won't appear on the live site until you do this.
When an anchor link's destination is hidden behind the header
You'll also need to set top padding equal to or greater than the header's height on the anchor link's destination. Where exactly you set this depends on the type of page.
If you're using an anchor link on a regular page
On a regular page, add top padding to the box where you set the destination ID.
Select the box with the anchor link ID set.
Open [Box] in the right panel. If the panel is closed, open the right panel first.
Under [Layout], in the padding settings, set the top value to equal or exceed the header's height.
Update your site from the publish panel. Your changes won't appear on the live site until you do this.
When navigating to a heading from a CMS article's table of contents
In a CMS article item's table of contents, the destinations are headings within the body text. Add top padding to the headings inside the rich text box on the CMS detail page.
In the design editor, open the CMS detail page (dynamic page) where the table of contents is placed.
Double-click a heading (e.g., H2) inside the rich text box to select it.
Open [Box] in the right panel. If the panel is closed, open the right panel first.
Under [Layout], in the padding settings, set the top value to equal or exceed the header's height.
Apply the same setting to any other headings (H1–H3) that appear in the table of contents.
Tip: If the space above headings becomes too large Adding top padding will also increase the space above headings within your body text. If you want to preserve the original look, reduce the top margin already set on the heading to compensate.
Update your site from the publish panel. Your changes won't appear on the live site until you do this.