Anchor offset with transparent header

  • Hi,

    I’m working with WP 6.4.2 with 2024 Theme and using a semi-transparent sticky header. The transparency seems to be throwing the anchor position out by the height of the header when you scroll to it. What is the recommended workaround for this. On previous sites I’ve added css to target: with an appropriate offset, e.g. 100px and then applied that class to the target, but I’m hoping there is a better way these days that works site-wide without needing to apply a fix to each anchor.

    This actual site is in development so I can’t share at this time, but I could stage a test site if really required.

    Thanks

    Tim

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi there,

    I believe my recommendation would depend on if it is only on the front page or on all pages.

    Do you want to add this transparent header to all pages?

    Thread Starter tim.lewis.croftedge

    (@timlewiscroftedge)

    Hi Felipe,

    Yes, we use the same transparent header across all pages.

    Best Regards

    Tim

    Hi there,

    Got it. In this case, it would be really useful to have the following:

    • The test/staging site where we can reproduce the same issue
    • All the CSS that you added to add this behaviour on the header

    I really don’t see a way of doing that which doesn’t require CSS.

    Thread Starter tim.lewis.croftedge

    (@timlewiscroftedge)

    Hi Felipe,

    I’ve set up a simple test site that demonstrates the issue at: https://blocks-testing.croftedge.com/ I also noticed the issue is the same if the header background is not transparent, i.e. it seems to be related to the header being sticky.

    Thanks

    Tim

    Thread Starter tim.lewis.croftedge

    (@timlewiscroftedge)

    Hi,

    I found that adding html {scroll-padding-top: 175px;} to my style sheet seemed to work, but this simple fix took a lot of searching for. Is there something I’m missing or should there be some offset setting available through the UI when making a header navigation element sticky, which is a very common thing to do.

    Best Regards, Tim

    Felipe Santos

    (@foosantos)

    Oh, that’s odd. I can reproduce it indeed when checking on the same structure.

    Can you share a screenshot on your header stick options with the List view showing on the page (example)?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Anchor offset with transparent header’ is closed to new replies.

Tags