How can I adjust the scroll down button in my Webflow hero section to account for a fixed navbar, ensuring the top part of the second fold is not covered?
TL;DR
- Measure the fixed navbar's height and add an invisible anchor div at the top of the second section with top padding and negative margin equal to the navbar height.
- Assign an ID to the anchor and set the scroll button’s link to that ID to ensure proper scroll positioning.
To prevent your fixed navbar from covering the top content of the second section when using a scroll down button, you need to offset the scroll distance. Here's how to do that in Webflow.
1. Measure Your Fixed Navbar Height
- Check the height of your fixed navbar in the Designer.
- Most fixed navbars are around 60px–100px in height.
- Note the exact height as you'll need it for the offset.
2. Add an Anchor Element to Your Second Fold
- Select the first section below the hero (second fold).
- Drag a Div Block into the top of this section.
- Give it a class like "Scroll Anchor".
- Set height to 0px, and add top padding or margin equal to the height of your navbar. For example, if your navbar is 80px:
- Set margin-top: -80px and padding-top: 80px.
3. Set the Scroll Link to Target the New Anchor
- Select your scroll down button in the hero section.
- In the Element Settings panel (gear icon), set the link to target the new anchor’s ID.
- Give the anchor a unique ID (like section-2), and set the scroll button's link to
#section-2.
4. Optional: Use Webflow’s Section Link Setting (With Precise Anchor Positioning)
- If you prefer not to use a separate anchor div, you can instead manually adjust the target section’s padding-top and margin-top to create the visual offset.
- This works the same way but modifies the section directly instead of adding an anchor div.
Summary
To avoid a fixed navbar overlapping your second fold, add a named anchor with a top offset (via margin and padding) equal to your navbar's height. Then link your scroll down button to that anchor using its ID.
