How can I link to specific sections on my Webflow homepage when using a sticky navbar that obstructs the section titles?
TL;DR
- Add top padding to sections or place an invisible Div Block with margin above the section to create space for the sticky navbar.
- Assign unique IDs to sections or Div Blocks and link navbar items to these IDs using
#section-id.
When using a sticky navbar in Webflow, it can obstruct section titles when linking to anchors. Here's exactly how to fix it:
1. Add Top Padding to Sections
- Select the section (or element) you want to anchor to.
- Add top padding equal to or slightly more than your navbar’s height.
- This will create enough spacing so that when users jump to the section, the title won't hide under the sticky navbar.
2. Use Anchor Links Properly
- Set an ID for each section: Select the section in the Webflow Designer, go to Settings, and under Element Settings, give it a unique ID (e.g., “about”, “services”).
- In your navbar link, set the URL to
#about,#services, etc., matching the section IDs exactly.
3. Alternative: Create an Invisible Anchor Element
- Insert a small, empty Div Block above each section you want to link to.
- Set a unique ID on the Div Block instead of on the full section.
- Style the Div Block with
Height: 0pxandMargin-Top: [navbar height in px]. - This method prevents needing to change the padding of your visible content.
4. Fine-Tune with Scroll Offset (Advanced)
- Webflow’s native interactions do not allow dynamic scroll offset for anchor links.
- If deeper control is needed (e.g., dynamic adjustment by screen size), you would need custom JavaScript, but padding/margin techniques are best for 95% of cases without needing code.
Summary
To prevent a sticky navbar from covering section titles when linking in Webflow, either add top padding to sections or use invisible Div Block anchors placed slightly above the sections. Then link nav items to the correct IDs using #section-id format.