Header: in-page link targets are covered by header

[joyously]

Now that the new header had fixed position, links to targets are hidden under it.

On a Make site, click on a sidebar link to a comment, for example, Matt's comment.
Note that you have to scroll to find the start of the comment.

You can add CSS for this (use the height of the header)
[id] { scroll-margin-top: 2em; }

[iandunn]

We do have something like that already:

wporg-mu-plugins/mu-plugins/blocks/global-header-footer/postcss/common.pcss

Line 29 in 01e6ca2

scroll-padding-top: var(--wp-global-header-offset, 0);

It works for me when I'm logged out, but not when logged in. Both have admin bars. It may be that the code assumes that logged-in sites don't have the admin bar, which recently changed on some sites.

[joyously]

That's not the same thing, since it's on html and not on [id], and in a media query.

[iandunn]

It's in a media query because the header isn't fixed on mobile.

wporg-mu-plugins/mu-plugins/blocks/global-header-footer/postcss/header/header.pcss

Lines 27 to 28 in 433d57f

	@media (--tablet) {
	position: fixed;

I haven't looked into targeting html vs an ID, though, that might be part of it 👍🏻

[iandunn]

Disabling the logged-out-admin-bar plugin doesn't fix it. IIRC it worked fine at launch, so if it's not the html vs id issue, it could be a recent change in Gutenberg.

[ryelle]

I think the issue here is limited to Make sites, and there's some kind of scrollTo JS in p2 that overrides the scroll-padding-top offset that works on other sites.

For example, this anchor on developer.w.org works, but this one on another make site doesn't.

[joyously]

I tried both of your links and they both have the problem. The developer one was worse for me than the Make one.
Clicking the first link shows me (Firefox):

Scrolling up a little shows how far off it was:

The second link shows me:

Scrolling up (less than the other one):

[ryelle]

Oh interesting, that's correct — in-page anchors work, so on Developer, if you use the side table of contents to navigate to section, it works as expected. Same with the list of links in the make dev note. But direct links to page content don't work.

[adamwoodnz]

This appears to be fixed now that the global header is no longer sticky. I've tested all the links in the comments on this issue.

Let me know if this is not the case.