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
- Add a unique ID to the target section and link to it using a full URL with the hash (e.g., /about#features).
- Offset for the fixed header by adding top padding or a spacer div equal to the header height, and use negative margin if needed to maintain layout.
To link to a section on a different page in Webflow without it being hidden behind a fixed header, adjust for scroll offset using a workaround since Webflow doesn't support native offset for anchor links across pages.
1. Use Anchor Links Properly Across Pages
- Add a unique ID to the section you want to link to. For example, set the Section ID to
features. - On the linking page, use a full path with hash in the link like:
/about#features.
2. Offset the Scroll Position with Padding or Margin
- The fixed header overlaps content because the anchor scrolls the section to the very top. You’ll need to manually offset this by adding spacing.
Option A: Add Padding to the Top of the Target Section
- Select the section with the anchor ID (
#features). - Add top padding equal to or slightly more than the height of your fixed header (e.g.,
80px). - This creates space above the section when scrolled into view.
Option B: Use a Spacer Div Inside the Section
- Add a div block at the top of your section.
- Set its height to your header's height (e.g.,
80px). - This keeps visual spacing clean without shifting internal section layout too much.
3. Hide the Extra Space in Regular Flow
If the space causes layout issues for in-page users (scrolling into the section as normal from within the page), you can use negative margin:
- Give the section or content inside the section a negative top margin equal to the top padding or spacer div height.
- Example: If you added
80pxpadding-top, addmargin-top: -80pxto the first element inside the section.
4. Double-Check Header Height Responsiveness
- If your header height changes between viewports (e.g., mobile vs desktop), consider using viewport-based units (like
5vh) or media queries for padding/margin adjustments.
Summary
To offset a fixed header when using anchor links to a section on another page in Webflow, add top padding to the target section or a spacer div inside it equal to your header height. If needed, adjust layout visuals using negative margin on internal elements.