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 height and add equivalent top padding or a spacer div to the second section.
- Assign the scroll button's link to the spacer's ID to offset scroll position and keep content visible beneath the navbar.
To prevent the hero section's scroll-down button from hiding the top of the second section behind a fixed navbar, you need to offset the scroll target by the navbar’s height.
1. Identify the Fixed Navbar Height
- Measure your fixed navbar height (e.g., 80px) in desktop and other breakpoints—it's usually set in the Style panel > Height.
- Make sure it is consistent or account for different heights using responsive settings.
2. Add Padding or Margin to the Target Section
- Select the top section that the scroll-down button links to (usually the section just under the hero).
- Add top padding equal to or greater than the navbar height (e.g., 100px top padding if your navbar is 80px tall).
- Alternatively, use a negative top margin on a nested container inside the section to visually pull up the content.
3. Use Anchor Link Offset via Spacer
- Place a spacer div above the content of the second section:
- Position it at the top of the section.
- Set its height equal to the navbar height (e.g., 80px).
- Set position: relative and a unique ID (e.g.,
#second-fold). - Set the entire second section's ID as something else, or remove the ID from the section and assign it to this spacer.
4. Connect the Scroll Button to the Spacer ID
- Select the scroll-down button in the hero section.
- Change the link setting to point to the spacer ID (e.g.,
#second-fold). - This ensures the scroll behavior stops just below the navbar.
5. Optional: Use JavaScript for Dynamic Offset (only if needed)
- If you need precise dynamic offset (e.g., responsive navbar sizes), custom JavaScript can adjust scroll behavior, but it’s not recommended unless necessary.
Summary
Use a spacer with an ID or offset the target section’s padding/margin to adjust scroll behavior so the top of the second section remains visible beneath your fixed navbar. Link the scroll button to this adjusted anchor point.