How can I set the scroll offset on my Webflow page with a sticky navbar, since the offset is not automatically adjusted when using "position:sticky"?

When using a sticky navbar in Webflow, anchor-links (e.g., linking to #section) scroll the page to the top of the section — but the sticky navbar often overlaps the heading. Webflow does not automatically adjust the scroll offset for this.

1. Use Padding or Margin as Scroll Offset

• Manually add top padding to the sections you’re linking to.
• For example, if your sticky navbar height is 80px, set padding-top: 100px and margin-top: -100px on the target section.
• This creates visual spacing without affecting actual scroll target positioning.

2. Add an Invisible Spacer

• Insert a spacer div above each anchor target (inside the same section or block).
• Set the spacer’s height equal to your navbar, and apply negative margin-top equal to that height.
• This pushes the real section down while keeping the scroll target intact.

3. Use JavaScript Scroll Adjustment (for dynamic control)

If you need to dynamically control offset behavior:

• Include a small JavaScript snippet with custom scroll logic.
• On link click, use scrollIntoView({ behavior: 'smooth', block: 'start' }) combined with offset handling.
• Avoid HTML inside Webflow embed for large scripts—use minimal inline scripts instead.

4. Avoid Overlap with Webflow’s Native Smooth Scroll

• Webflow's built-in smooth scroll doesn’t account for sticky headers.
• To fully control anchor behavior, disable Webflow’s smooth scroll and use a custom one (requires custom JS).

Summary

Webflow does not natively offset anchor scrolls for sticky navbars. Use padding and negative margin, or invisible spacer divs to provide scroll offset. For more dynamic control, use custom JavaScript to program scroll positions manually.