Support #14296
closedAnchor links are covered by top-of-page header
0%
Description
I have [this problem](https://wordpress.org/support/topic/heading-with-anchor-links-are-covered-up-by-top-of-page-header/). In the past, I've used this CSS in the "simple CSS" section of appearance that solved the problem:
:target::before { content: ""; display: block; height: 35px; /* fixed header height*/ margin: -35px 0 0; /* negative fixed header height */ }
However, it no longer seems to work. For example, Allen's publication gets covered up by the top bar using [this link](https://khatchad.commons.gc.cuny.edu/research/publications/#Spektor2020). Any idea on what could be wrong?
Updated by Raymond Hoh over 3 years ago
- Tracker changed from Bug to Support
Your CSS hack works in Firefox and Edge (to some extent), but not in Chrome. Chrome doesn't appear to apply the :before
markup on the target
when I check the developer console.
Also, I think you could optimize your HTML markup so this:
<a name="Spektor2020"></a><b>Allan Spektor</b>
Becomes this:
<b id="Spektor2020">Allan Spektor</b>
Perhaps that might fix things?
There are other workarounds available on this StackOverflow page that you could also try:
https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header (your target:before
CSS hack is also listed there)
Updated by Raffi Khatchadourian over 3 years ago
Raymond Hoh wrote:
Your CSS hack works in Firefox and Edge (to some extent), but not in Chrome. Chrome doesn't appear to apply the
:before
markup on thetarget
when I check the developer console.Also, I think you could optimize your HTML markup so this:
<a name="Spektor2020"></a><b>Allan Spektor</b>
Becomes this:
<b id="Spektor2020">Allan Spektor</b>
Perhaps that might fix things?
Unfortunately, I see the same behavior.
There are other workarounds available on this StackOverflow page that you could also try:
https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header (yourtarget:before
CSS hack is also listed there)
Thanks, I'll have a look!
Updated by Raffi Khatchadourian over 3 years ago
Wow, this is a hot topic for sure! Wouldn't everyone on CAC have this problem? Should there not be a site-wide solution? Thanks, again!
Updated by Raymond Hoh over 3 years ago
Wouldn't everyone on CAC have this problem? Should there not be a site-wide solution?
Yes, everyone would have this problem.
If all sites used the same theme, then a CSS or JS site-wide solution could be possible. However, some sites hide the admin bar with custom CSS and some sites even have another fixed header just below the admin bar. Also, plugins can add their own CSS and JS, which can cause a potential conflict with anchor links.
I think the :target::before
CSS snippet doesn't work well with Chrome when combined with other HTML/CSS elements on the page.
The following StackOverflow answer looks like the best solution as it uses JS: https://stackoverflow.com/a/13067009, but it requires adding a fixed height, which would not work across all Commons sites.
Updated by Raffi Khatchadourian over 3 years ago
Raymond Hoh wrote:
Wouldn't everyone on CAC have this problem? Should there not be a site-wide solution?
Yes, everyone would have this problem.
If all sites used the same theme, then a CSS or JS site-wide solution could be possible. However, some sites hide the admin bar with custom CSS and some sites even have another fixed header just below the admin bar. Also, plugins can add their own CSS and JS, which can cause a potential conflict with anchor links.
I think the
:target::before
CSS snippet doesn't work well with Chrome when combined with other HTML/CSS elements on the page.The following StackOverflow answer looks like the best solution as it uses JS: https://stackoverflow.com/a/13067009,
I can add JavaScript code to my CAC site?
Updated by Raffi Khatchadourian over 3 years ago
I found [this article](https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/). Looks like I'll need [this plugin](https://wordpress.org/plugins/insert-headers-and-footers/), but it's not currently installed.
Updated by Boone Gorges over 3 years ago
For security reasons, we definitely cannot allow Commons users to insert JS into their sites.
I'm afraid that we'll need to figure out some CSS-based solution. I tried another selector syntax that seems to work in Chrome:
a[name] { content:""; display:block; height:80px; /* fixed header height*/ margin:-80px 0 0; /* negative fixed header height */ }
I've added this Customizer -> Additional CSS. Test with https://khatchad.commons.gc.cuny.edu/research/publications/#Bagherzadeh2020a (it requires
a name=)
Updated by Raffi Khatchadourian over 3 years ago
Thanks, Boone. After setting the offset to 57.5px, this seems to work with https://khatchad.commons.gc.cuny.edu/research/publications/#Bagherzadeh2020, but not with https://khatchad.commons.gc.cuny.edu/research/students/#current. This is an H2:
<h2 id="current">Current Research Students</h2>
I tried messing with the CSS but couldn't quite get it to work.
Updated by Boone Gorges over 3 years ago
H2 elements obviously won't be targeted by the CSS selector a[name]
. The best I can suggest is that you add extra top-padding to all of the h2 elements on your site.
Updated by Raffi Khatchadourian over 3 years ago
Boone Gorges wrote:
H2 elements obviously won't be targeted by the CSS selector
a[name]
. The best I can suggest is that you add extra top-padding to all of the h2 elements on your site.
Understood. But, there are some contexts where H3 elements work out of the box, e.g., https://khatchad.commons.gc.cuny.edu/teaching/#Spring_2019. Do we know why these work and others don't?
Updated by Boone Gorges over 3 years ago
On my machine, that link does not look right (ie the admin bar overlap is taking place). Try in a private browser window - it could be that your scroll location is being cached.
Updated by Raffi Khatchadourian over 3 years ago
Boone Gorges wrote:
On my machine, that link does not look right (ie the admin bar overlap is taking place). Try in a private browser window - it could be that your scroll location is being cached.
Yup! You're right!
So, even if that header/footer plug-in was installed, I wouldn't be able to add that JS code snippet from the SO post? That does seem like the most robust solution.
Updated by Boone Gorges over 3 years ago
I'm afraid we can't allow arbitrary JS to be introduced on sites.
If we could determine a global solution, even one that requires JS, I'd be glad to consider it. But this will take more research.
In the meantime, you'll need to introduce more selectors to get your desired results. I've added the 'subheader' class to a couple of your anchors, and then added more CSS to add a :before pseudo-element, and it seems to do the trick. https://khatchad.commons.gc.cuny.edu/teaching/#Spring_2019
Updated by Boone Gorges almost 3 years ago
- Category name set to WordPress Themes
- Status changed from New to Resolved
- Target version set to Not tracked
Closing on the basis of the tentative solutions above. Thanks for your patience, Raffi.
Updated by Raffi Khatchadourian 3 months ago
Hm. Looks like they got covered again. For example, check out https://khatchad.commons.gc.cuny.edu/2022/07/13/nyu-gstem-students-visit-during-the-summer-of-2022/#pranavi. I tried changing the CSS values for "a[name]" but no luck. Any ideas?