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

ruthfarrell
HubSpot Product Team

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.

0 Replies

No replies on this post just yet

No one has replied to this post quite yet. Check back soon to see if someone has a solution, or submit your own reply if you know how to help! Karma is real.

Reply to post

Need help replying? Check out our Community Guidelines

0 Replies 0