Project

General

Profile

Support #14296

Anchor links are covered by top-of-page header

Added by Raffi Khatchadourian 8 months ago. Updated 3 months ago.

Status:
Resolved
Priority name:
Normal
Assignee:
-
Category name:
WordPress Themes
Target version:
Start date:
2021-04-08
Due date:
% Done:

0%

Estimated time:

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?

History

#1 Updated by Raymond Hoh 8 months 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)

#2 Updated by Raffi Khatchadourian 8 months 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 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?

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 (your target:before CSS hack is also listed there)

Thanks, I'll have a look!

#3 Updated by Raffi Khatchadourian 8 months 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!

#4 Updated by Raymond Hoh 8 months 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.

#5 Updated by Raffi Khatchadourian 8 months 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?

#7 Updated by Boone Gorges 8 months 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=
)

#8 Updated by Raffi Khatchadourian 8 months 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.

#9 Updated by Boone Gorges 8 months 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.

#10 Updated by Raffi Khatchadourian 8 months 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?

#11 Updated by Boone Gorges 8 months 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.

#12 Updated by Raffi Khatchadourian 8 months 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.

#13 Updated by Boone Gorges 8 months 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

#14 Updated by Boone Gorges 3 months 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.

Also available in: Atom PDF