Anchor links cutting off header of section - can I offset the anchor by "xx" pixels?

Jesse Penner

• August 19, 2021 17:20
• Edited

I have a site where several pages have a sticky nav bar with anchor links that scroll to various blocks on the page.  The site behaves as expected, but the top of the block is always cut off by the nav bar.

Is it possible to input CSS code to offset the anchor link by a certain number of pixels in order to make sure the full block is in view when the anchor link is clicked?

Here is an example of a page where this is an issue: 

https://wisecreative.ca/u-drain/residential-u-drain/

 

0

• 

  Alex

  • August 19, 2021 20:25

  Hi,

  As a solution, you could add a padding-top (as the height of the header) to the section with id so that when scrolling that padding-top will be under the sticky header and the content below. You could also add that link to a hidden element with the height 100px and margin-top: -100px above the section.

  For other solutions, you could try this article: https://gomakethings.com/how-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header-with-one-line-of-css/

   

  0

Please sign in to leave a comment.