How do I set the scroll stop point to be 60px above each section's H2 in Webflow for two pages with anchor links to sections "Services" and "Products We Love" where the scroll stop point is not consistent?

If your anchor links scroll inconsistently, not stopping the correct distance above each H2, you can adjust the scroll position using Webflow’s built-in tools and custom CSS.

1. Adjust Section Padding or Offset

• Check the section’s top padding: Add padding-top: 60px to each section so the heading does not align directly at the top when scrolled.
• Use a spacer div: Insert an empty div above each heading with a height of 60px to create the necessary offset.

2. Use ID-Based Anchor Links

• Ensure each section (Services and Products We Love) has a unique ID assigned under the Element Settings panel.
• Reference these IDs in your links (e.g., #services, #products-we-love).

3. Apply CSS Scroll Margin

• Webflow does not provide direct controls for an offset on anchor scrolling, but you can manually apply:
• Custom CSS (scroll-margin-top):
  • Open Webflow’s Page Settings > Custom Code > Inside