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.

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!