Why do the "Brand" and "Social" links in Webflow not go to the correct anchor point on certain browsers and devices?

Anchor links in Webflow like “Brand” and “Social” may not scroll to the correct section on certain browsers or devices due to layout shifts, fixed headers, or inconsistent viewport handling.

​

1. Check for Fixed Headers or Navigation Bars

​

• If your site uses a fixed navigation bar, anchor links may scroll too far, hiding the heading underneath.
• Webflow doesn't automatically offset anchor scrolls to account for fixed headers.
• Solution: Add a scroll offset using Webflow's built-in settings or custom CSS (e.g., padding or margin on the anchor section).

​

2. Confirm Unique and Correct IDs

​

• Anchor links rely on unique section IDs (e.g., #social, #brand).
• If multiple elements share the same ID or the ID is missing, the browser may not scroll correctly.
• Solution: Go to each target section's Element Settings and confirm the ID field is accurately filled and unique.

​

3. Avoid Nested or Duplicated Symbol Usage

​

• If your navigation menu is reused via Symbols and placed outside the main page flow (e.g., in a sidebar or overlay), some anchor links may break due to rendering inconsistencies.
• Solution: Ensure anchor links are in the same page and context as their target sections.

​

4. Viewport Height and Overflow Issues

​

• Some devices or browsers handle 100vh units or overflow settings differently, especially on mobile Safari.
• This can cause sections to not align exactly with anchor points.
• Solution: Test with consistent section heights and avoid using 100vh with mobile-specific tweaks. Add overflow: hidden cautiously.

​

5. Page Still Loading or Lazy Images Shift Content

​

• If the page hasn’t fully rendered or if elements like images are lazy-loaded, the target section may shift after scrolling completes.
• Solution: Enable loading="eager" for key images or preload important assets. Consider animations that delay anchor accuracy.

​

6. Smooth Scroll Conflicts

​

• Webflow includes built-in smooth scroll, but adding custom JavaScript or CSS may interfere.
• Solution: Disable custom scroll-behavior CSS or conflicting JS scroll plugins if anchor behavior is inconsistent.

​

Summary

​

Anchor links like “Brand” and “Social” may not scroll correctly in specific browsers or devices due to issues with fixed headers, missing/duplicate IDs, layout shifts from lazy loading, or conflicting custom scroll behaviors. Ensure IDs are correct, account for header offset, and test across devices.