Solution 1 :

We now have scroll-margin to handle kind of thing.

From CSS-Tricks:

scroll-margin is used to adjust an element’s snap area (the box that defines where the element will be snapped to). Adding
scroll-margin is useful when you need to give an element space from
the edge of the container when snapped into place, but allowing for
situations where each element might need slightly different spacing.

Problem :

I have some pages on a WordPress site that have name anchor tags that initially get covered by the fixed/sticky header when clicked. I’m using some CSS that fixes that, but it only seems to work when linking inside the specific page(s).

Here’s the code I’m currently using:

a[name] {
  padding-top: 178px;
  margin-top: -178px;
  display: block;

Any thoughts would be greatly appreciated!


Comment posted by Mhutch

Thanks for the feedback and info. I added the following code: html { scroll-padding-top: 350px; } and it works, but works kind of wonky. And it doesn’t seem to work without the initial a[name] code. Do you know if there’s a way to implement this without having to add a class to specific div, etc?? Thanks again!