The issue you're experiencing with the "Brand" and "Social" links not going to the correct anchor point on certain browsers and devices can have several potential causes. Here are a few possible reasons and solutions to consider:
1. Browser Compatibility: Different browsers can interpret and handle anchor links differently. It's important to test your website on multiple browsers (such as Chrome, Firefox, Safari, and Edge) to identify if the issue is isolated to a specific browser or a more general problem. If it's a browser-specific problem, you may need to use browser-specific CSS or JavaScript fixes to ensure consistent behavior across different platforms.
2. Scroll Speed and Timing: In some cases, the scroll speed and timing of the anchor link may cause it to miss the correct target position, especially if there are large images or dynamic content loading on the page. Try adjusting the scroll speed or using JavaScript scroll triggers to ensure smooth and accurate scrolling to the desired anchor point.
3. Sticky Navigation or Overlapping Elements: If you have a sticky navigation or other fixed elements on your page, they can overlap with the target anchor point, preventing it from being correctly displayed. You may need to adjust the positioning or add padding/margin to ensure the anchor point is fully visible and not obstructed by any fixed elements.
4. HTML Structure and IDs: Make sure you have set up the correct HTML structure and assigned unique IDs to each anchor point on your page. Double-check that the ID names match the anchor links to ensure proper linking. Sometimes, incorrect or duplicate IDs can cause unexpected scrolling behavior.
5. Device-specific Considerations: Different devices (such as desktop, tablets, and mobile devices) may have variations in touch events, screen dimensions, or scrolling behavior. It's important to test your website across various devices and consider device-specific CSS or JavaScript adjustments to accommodate for these differences.
6. Webflow Interactions and Animations: If you have implemented Webflow interactions or animations on your page, they might interfere with the smooth scrolling functionality of anchor links. Temporarily disable any interactions or animations to see if they are causing the issue. If so, you may need to adjust the timing or triggers of your interactions to ensure they don't interfere with anchor link scrolling.
If none of these solutions resolve the issue, it may be helpful to provide more specific details about the problem, such as the specific devices, browsers, and operating systems you're experiencing the issue on.