CUNY Academic Commons

I'm unsure what changed, but I was able to adjust the existing CSS to accommodate your first link:

a[name] {
    content: "";
    display: block;
    height: 28px;
/* fixed header height*/
    margin: -28px 0 0;
/* negative fixed header height */
}

As for the second one, you're trying to link to an inline named link (<p><a id="pranavi" href="https://www.linkedin.com/in/pranavigpalli/">Pranavi Gollanapalli</a> is a rising senior...). It's pretty hard to set vertical offsets on inline elements like this. Instead, you could introduce an invisible <a name="pranavi"></a> tag like you have elsewhere. However, it's not clear to me that this conforms completely with the HTML5 spec; see https://stackoverflow.com/questions/484719/should-i-make-html-anchors-with-name-or-id. An alternative technique is to use WP's native "anchor" tool for the paragraph block, and then to add a bit of margin for p:target:

p:target {
    padding-top: 28px;
    margin-top: -28px;
}

In my tests, this works pretty well across browsers: https://khatchad.commons.gc.cuny.edu/2022/07/13/nyu-gstem-students-visit-during-the-summer-of-2022/#gollanapalli

Boone Gorges wrote in #note-1:

I'm unsure what changed, but I was able to adjust the existing CSS to accommodate your first link:

[...]

Ah, I found out that I'm hitting a browser refresh issue. My browser won't pick up the CSS changes just by refreshing. I need to close and re-open the window, seemingly. Once I do that, now I am seeing changes in the CSS. I wound up making a bit more of an adjustment.

As for the second one, you're trying to link to an inline named link (<p><a id="pranavi" href="https://www.linkedin.com/in/pranavigpalli/">Pranavi Gollanapalli</a> is a rising senior...). It's pretty hard to set vertical offsets on inline elements like this. Instead, you could introduce an invisible <a name="pranavi"></a> tag like you have elsewhere. However, it's not clear to me that this conforms completely with the HTML5 spec; see https://stackoverflow.com/questions/484719/should-i-make-html-anchors-with-name-or-id. An alternative technique is to use WP's native "anchor" tool for the paragraph block, and then to add a bit of margin for p:target:

[...]

In my tests, this works pretty well across browsers: https://khatchad.commons.gc.cuny.edu/2022/07/13/nyu-gstem-students-visit-during-the-summer-of-2022/#gollanapalli

Hm. I'm seeing no change here in Chrome.

Yeah, I agree that this is probably difficult to get right across browsers. I tried Firefox and the results were different.

Adding Ray as a watcher in case he has more ideas.

This would be fairly easy to solve in a theme-independent way with JS, except that some themes add fixed-position headers/navigation elements (in particular on mobile). So I'm not sure a global solution is possible.

Boone Gorges wrote in #note-4:

Adding Ray as a watcher in case he has more ideas.

This would be fairly easy to solve in a theme-independent way with JS, except that some themes add fixed-position headers/navigation elements (in particular on mobile). So I'm not sure a global solution is possible.

Thanks Ray and Boone. Not a big deal, just a little annoying. Weird that one case was fixed but not the other.

Thanks Ray and Boone. Not a big deal, just a little annoying. Weird that one case was fixed but not the other.

One case uses empty <a> elements with a 'name' attribute. The other adds an 'id' attribute to the non-empty block-level element (ie the paragraph). The former works, the latter is inconsistent. If you want them to be consistent, you can add the empty anchors (might need to do this in HTML mode):

<a name="pranavi"></a>
<p>This is the content of your paragraph</p>

I guess "name" is deprecated in HTML 5?

Anyway, I got it to work by adding more CSS:

p[id] {
    padding-top: 18px;
    margin-top: -18px;
}

Hm. That "fix" caused other problems. I found a similar issue here: https://stackoverflow.com/questions/21553347/navbar-hiding-text-after-clicking-on-anchor-link

I think I got it with this: https://support.knowledgeowl.com/help/fix-anchor-links-hidden-by-top-navigation

/* Make sure that the top navigation never overlaps content when an anchor is clicked */
body, html {
  scroll-padding-top: 55px; /* adjust the pixel amount here for your top navigation bar height */
}