Anchor links leading to the wrong section of the page - SOLVED

[ruthfarrell]

Anchor links enable you to link a user to a specific location on the same page. You can add anchor links into your HubSpot content via the steps linked here.

If you come across an issue where clicking on the anchor links leads you to the incorrect position on the page, this may be because your website has a sticky/fixed header, and the height of this is not being factored into the scroll position of the browser. 

You can compensate for this by adding the following code snippet into your page:

<style>
 a[data-hs-anchor="true"] {   
   display: block; 
   position: relative; 
   visibility: hidden; 
   top: -100px;  
  }
</style> 

Just adjust the top: -100px; to match the height of your website's header.  So if for example your sticky header is 150px in height, this results in top: -150px; 

Add this code snippet either within the head HTML section of your page to affect the one page or directly into your attached CSS file without the wrapping <style></style> tags, to affect your entire website.

[GMoussa]

I tried applying this code in the header, but it didn't work for me. Perhaps the code needs adjustment. Could you assist me with this?

[NaomiWT]

I have been looking for this solution for a long time and this worked. Thank you!