Anchor links not working properly due to sticky header

  • Resolved larryjames

    (@larryjames)


    1 month, 3 weeks ago

    My pages use a sticky header which is about 100px in height, I use anchor links to link to sections on the page but the link is offset by the height of the sticky header. Is there a easy css or javascript fix for this

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter larryjames

    (@larryjames)

    I found a fix to solve this issue, I am posting here in case someone else has same issue. I gave the container I targeting an id for the anchor text and a class of anchor-text. I added the css below to offset the scroll. Adjust the size to suit your need.

    .anchor-link {
    scroll-margin: 120px;
    }



    Hi @larryjames,

    I’m glad to hear you found a CSS workaround! ??

    Thanks for sharing it here as well. Feel free to mark this ticket as resolved, but don’t hesitate to reach out if you need any further assistance in the future.

    Best regards,
    Aradhy

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.