How can I link to specific sections on my Webflow homepage when using a sticky navbar that obstructs the section titles?
TL;DR
- Assign unique IDs to each target section and link to them from the navbar using anchor links (e.g., /#about).
- Offset for a sticky navbar by applying a scroll-margin-top style via Custom Attributes or insert invisible spacer divs above each section to ensure correct scroll positioning.
To correctly link to specific sections on your Webflow homepage while accounting for a sticky navbar that may obstruct content, you need to adjust anchor link behavior using spacing techniques or custom attributes.
1. Use Anchor Links with Unique Section IDs
- Assign a unique ID to each section you want to scroll to.
- Select the section in Webflow’s Designer, go to the Settings panel (D key), and type a unique value like
#about,#services, etc. into the ID field. - In your navbar, set the button or link to go to
/#about, for example.
2. Offset for Sticky Navbar Using Scroll Margin
- Select the section that scrolls into view behind the sticky navbar.
- In the Style panel, add a top margin or use custom CSS through an Embed component.
- Best method: set a scroll offset using the scroll-margin-top property. In Webflow:
- Select your section and go to Style panel → Custom Attributes.
- Add:
- Name:
style - Value:
scroll-margin-top: 100px;(replace100pxwith your navbar’s height)
- Name:
- This means when the anchor link is triggered, the element scrolls 100px lower to be visible under the sticky navbar.
3. Alternate Solution — Add Invisible Spacer Div
- Add a div block above each section.
- Set its height equal to or slightly more than your sticky navbar (e.g. 100px).
- Make it display: block and visibility: hidden to ensure it pushes content but isn’t visible.
- Anchor the link to that spacer div’s ID instead.
4. Keep All Sections on the Same Page
- This technique only works if your homepage is a single-page layout (not loading into another page).
- If the navbar links go to
/#section-id, they must be used for navigation within the same Webflow page, or you'll need to reference the full path (e.g.,/index.html#about).
Summary
Use section IDs for anchor links, and apply scroll-margin-top via Custom Attributes or use a spacer div to offset the scroll position when using a sticky navbar. This ensures your section titles aren’t hidden behind the sticky header.