How can I make an anchor link to a section on a new page in Webflow with a fixed header, without the top of the section being covered by the header?

To link to a section on another page in Webflow using an anchor link, and ensure the top of the section isn't covered by a fixed header, follow these precise steps:

1. Add a Unique ID to the Target Section

• Select the section on the destination page you want to jump to.
• In the Element Settings panel, set a unique ID (e.g., pricing, features, etc.) in the ID field. This becomes the anchor.

2. Offset the Fixed Header Using Padding or Scroll Margin

Fixed headers often cover anchored content. You can prevent this in one of two ways:

Option A: Scroll Margin (Best Practice)

• Select the target section again.

• In the Style panel, add a custom CSS property in the page’s Custom Code (Head):

  Example (insert in Site Settings > Custom Code > Head):
  ```

  ```

• Replace 80px with your header’s height.

• Adjust the ID (#pricing) as needed for each anchored section.

Option B: Padding + Negative Margin

• Add padding-top to the target section equal to the height of your fixed header.
• Then apply a negative margin-top of the same height to bring its position back visually.
• Use this only if scroll-margin-top isn't effective (e.g., due to browser quirks).

3. Create the Anchor Link on Another Page

• On your origin page (where the user clicks), select your link or button.
• Under the Link Settings, choose URL and enter:
• /your-page#your-section-id
• Example: /pricing#plans

4. Test the Anchor Behavior

• Publish your site and click the link to test.
• Ensure the section scrolls into view below the fixed header, not behind it.

Summary

To link to a section on another Webflow page without it being hidden by a fixed header, use an anchor link with a scroll-margin-top CSS property on the target section. This is the cleanest way to offset content and maintain cross-browser consistency.