[Support request] Anchors and footnotes conflict with sticky header

[Atef]

Hi,
I noticed that Anchors and footnotes conflict with the sticky header.

this is because the page jumps to the anchor/footnote location, making it the top line of the screen. However, since there is a sticky header, this makes the required anchor disappeab behind the footnote. so the end result is corrupt.

please try the footnotes here:
https://coptic-treasures.bcprafm7-liquidwebsites.com/hello-world/#_ftn1

as for the anchors, I created a workaround, by putting the anchor well above were it should be, to compensate for the sticky header height, although this workaround is not convenient.

but for footnotes, it is a core WordPress programming, so i can’t apply the same workaround.

can you please advise a solution that looks proper to visitors?

thanks in advance.

[David]

Hi there, you can try using the GeneratePress smooth scroll. Just activate it in the Customiser > General and add the smooth-scroll class to your links. This should offset the header.

[Atef]

Hi,
Thanks for the reply.

I enabled the smooth scroll and nothing changed.

the footnotes are automatic WordPress core function. There is no way to control its class.

also, I checked it for a manual anchor, still nothing changed. the page jump up and ignore the sticky header.

PS. i don’t have caching mechanisms in the website, so the tests are fresh.

please try it yourself here:

https://coptic-treasures.bcprafm7-liquidwebsites.com/hello-world/#_ftn1

and here is the manual anchor:
half way down the page, you will see a large button saying: Anchor test with smooth scroll.

it is supposed to jump down to just above my name in bold “Atef”.
but it still doesn’t jump to the correct place, and I have to scroll up to see the name:
https://coptic-treasures.bcprafm7-liquidwebsites.com/person/maged-kamel/#person-gallery

here is how my custom anchor is coded:

<a name="person-gallery" class="smooth-scroll"></a>
<strong>Atef</strong>

thanks

[David]

Hi – ok the smooth scroll class needs to be added to the link, with the href containing the ID of the element it is jumping to e.g

<a class="smooth-scroll" href="#my-id">link to somewhere</a>

<p id="my-id">Smooth scrolled to this point</p>

Note – Any Element Tag can be used

So how are the foot note links being generated? Which plugin?

[Atef]

hi,
Ok thanks. I fixed the anchor. here are the results:
– Desktop:
Chrome and Microsoft edge: Work fine
-Mobile:
Chrome: doesnt’t work. because Chrome respects the mobile sticky menu.
Samsung mobile Browser: Works, because this browser doesn’t respect the sticky mobile menu.

2- this method doesn’t work on any browser, if the page loads straight to the anchor. so if you visited this link straight, it will not load on the red phrase” smooth scrolled to this point”:
https://coptic-treasures.bcprafm7-liquidwebsites.com/person/maged-kamel/#my-id

3- As for the footnotes, I am not using and plugins. I write the test in Microsoft Word, copy it and paste it to the “visual” editor of WordPress. WordPress respects the heading and footnotes of the copied text.
So this is an automatic process.

I have thousands of pages with anchors like this.

I came across this problem before in another website, where I was using a table of contents plugin, which creates anchors to the headings.
However, he plugin had an option in the plugin control panel to set the spacing above the anchors, to compensate for the sticky headers and menus. the users could change the value based on their theme.

but i am not using this plugin on this website, all the results are just native WordPress footnotes.

I tried pasting a dummy text here for you to test, but the forum here doesn’t handle the footnotes.

Thanks.

[Tom]

1. There’s some known issues with the smooth scroll script and our mobile menu, which will be fixed in GPP 1.7.

2. Unfortunately this will won’t work with our script, as it only initiates on link click – not on load.

You can find a few other solutions here: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header

The problem is that your footnotes don’t have any specific CSS selectors, which makes it very hard to apply a fix to them. Since you already have thousands of pages with these links, I can’t really think of a perfect solution for you.

Maybe it would be better usability for users on your sites to only enable the sticky navigation while scrolling up?

[Atef]

Hi Tom,

thanks for the quick response.

1- ok will wait.
2-ok
3- footnotes: this is not really “my footnotes”. these are wordpress core functionality. I am not imposing any custom code.
I imagine that i am not the only one using Generatepress and have footnotes?

do you have solutions is i don’t have thousands of pages? it might be a starting point for me.

I can’t change Generatepress, it is my favourite and will not change it whatsoever, but it looks bad when people jump to the wrong anchor (that’s what it appears to visitors, it appears as if the footnotes are shifted)

As for your suggestion to enable sticky navigation only while srolling up, how to do so?

i went to customizer/layout/sticky navigation, then ticked “Hide when scrolling down”.
this worked on desktop only.

I have the sticky navigation ON (i.e. for both desktop and mobile).

so how to enable it on mobile?

thanks

[Atef]

Hi Tim,

I found out that the “hide when scrolling down” solved the footnotes issue on desktop.

https://coptic-treasures.bcprafm7-liquidwebsites.com/hello-world/

so the only outstanding issue now is on mobile, because the sticky menu stays all the time.

any suggestion?

thanks

[Tom]

The mobile header has the same option in Customize > Layout > Header 🙂

[Author]

Posts