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?
TL;DR
- Assign a unique ID to the target section (e.g.,
pricing) and use it in the link URL like/page-name#pricing. - Add bottom margin to the fixed header and top padding to the target section equal to the header's height to prevent overlap.
- Optionally, use a custom attribute (
data-scroll) for scroll offset adjustments if using smooth scrolling.
To create an anchor link to a specific section on another page in Webflow and ensure it is not hidden behind a fixed header, you need to adjust for the header's height using margin or scroll offset techniques.
1. Set Your Anchor Section’s ID
- Select the section you want to link to.
- In the Element Settings panel, add a unique ID (e.g.,
pricing). - This ID will be used in the link like
/page-name#pricing.
2. Add Bottom Margin to the Fixed Header Section
- Fixed headers cover content unless spaced correctly.
- Add extra bottom margin to the fixed header equal to its height (e.g., if the header is 80px tall, set its bottom margin to 80px).
- This won’t affect page layout visibly but will offset anchor scroll position.
3. Apply Top Padding or Spacer to Target Section
- Select the target section (with the anchor ID).
- Add top padding equal to or slightly more than the fixed header’s height (e.g., 80–90px).
- This creates space so the content isn’t hidden when the page scrolls to that anchor.
4. Adjust Scroll Offset with Custom Attribute (Optional)
- If using Webflow’s built-in smooth scroll, you can fine-tune the scroll position:
- Select the anchor section.
- Go to Element settings > Custom Attributes.
- Add a custom attribute: Name:
data-scroll, Value:offset: -80(adjust based on your header height). - This requires the use of Webflow Interactions or scripts, so use cautiously.
5. Set Up the Anchor Link
- On any element (button, nav link, etc.), set the link to:
- URL:
/page-name#section-id(e.g.,/pricing#features) - This will navigate to the destination page and scroll to the section with the matching ID.
Summary
To anchor-link to a section on another page without it being covered by your fixed header in Webflow, add top padding to the target section or give the header bottom margin, and structure your anchor link as /page#section. This ensures the section scrolls into view clearly beneath the fixed header.
