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 section IDs and link nav items to them.
- Add top padding or use spacer divs with negative margins equal to navbar height to prevent content from being hidden.
When using a sticky navbar in Webflow, linking to page sections using anchor links may cause headers or content to be obscured beneath the navbar. Here's how to adjust for that.
1. Use Anchor Links With Section IDs
- Make sure each section on your homepage has a unique ID set in the Element Settings panel (e.g.,
#about,#services). - In your navbar, set your nav links to link to these section IDs, such as
/#about.
2. Add Top Padding or Margin to Sections
- Add top padding or margin equivalent to or slightly more than your navbar’s height to the target sections. This creates spacing so content is visible below the sticky navbar.
- For example, if your navbar is 80px tall, apply padding-top: 100px to each anchor target section.
3. Use a Spacer Div With Negative Margin (Recommended)
- Add an invisible spacer div above each section you want to link to.
- Give it a height equal to your navbar’s height (e.g., 80px) and set its margin-top to -80px to offset the scroll position.
- This keeps visual layout consistent while adjusting scroll behavior.
4. Use Custom Attributes for Smooth Scrolling Adjustments (Optional)
- If you’re using custom JavaScript or Webflow Interactions for smoother scrolling, you can also adjust offsets dynamically, but this is not necessary for most users.
Summary
To fix section linking with a sticky navbar blocking section headers, add equivalent top padding, use spacer divs with negative margins, and ensure your links reference correct section IDs. This ensures clean scroll behavior without content being hidden under your navigation.