Why do the "Brand" and "Social" links in Webflow not go to the correct anchor point on certain browsers and devices?
TL;DR
- Ensure anchor links exactly match unique section IDs and avoid using full URLs for same-page navigation.
- Add top padding or use scroll offset techniques if a fixed navbar covers the target section.
- Place IDs on top-level elements, avoid nesting, and test across devices and browsers for inconsistencies.
If your "Brand" and "Social" nav links in Webflow aren’t navigating to the correct anchor points, it’s usually due to responsiveness issues, fixed headers, or incorrect anchor link setup on certain browsers or devices.
1. Check Anchor Link Accuracy
- Make sure links match the exact ID of the section they’re targeting (case-sensitive, no extra characters).
- For anchor links, they should be set to “Section Link” in Webflow, pointing to a unique ID assigned to a section (e.g.,
#social). - Avoid setting the link to a page URL plus a fragment (like
/home#social) unless navigating between pages.
2. Confirm Unique and Correct Section IDs
- Go to each target section and ensure it has a clearly set unique ID (no duplicates across the page).
- Select the section and check in the Element Settings panel, under “ID.”
3. Consider Fixed Header Offset
- On some devices or browsers, a fixed or sticky nav bar can cover the target section after scroll.
- To counter this, add top padding or margin to your anchor sections, equal to or greater than the navbar height.
- Alternatively, use the Offset Anchor Scroll technique via custom attributes or JavaScript if precise scrolling is critical.
4. Avoid Nested Elements with IDs
- Don’t place the ID on a child element nested deep inside a section. Some browsers may miscalculate the scroll.
- Place the anchor ID directly on the top-level section or
divblock.
5. Test with Different Browsers and Devices
- Some mobile browsers (especially older iOS Safari or Android WebView) handle anchor scrolls inconsistently.
- Use Webflow’s Preview mode and live publish to check multiple devices and browsers.
- If testing in Safari, ensure scrolling behavior is normal — not affected by
scroll-behavior: smoothincompatibilities.
6. Smooth Scroll Interactions Conflicts
- If you’re using custom smooth scroll JavaScript, it may conflict with native anchor behavior.
- Remove or test with that script disabled to confirm whether it’s causing offset issues.
Summary
Anchor links not landing correctly in Webflow are usually caused by incorrect IDs, fixed navbars overlapping the scroll point, or inconsistent browser behavior. Ensure accurate section IDs, add offset spacing if needed, and test across devices to isolate the issue.