hi there

I was wondering if there is a solution for the following: I use the stick nav bar but now whenever I use anchors in a text, this piece of text is hidden behind the sticky nav.

Please see as an example: webinprogress.be/todoroff/nl/teksten/mystiek/111-grondslagen-en-doorwerking-van-de-religieuze-vrouwenbeweging-in-de-extatische-mystiek-en-new-age

At the very bottom there are anchors, if you click them, you see what I mean.

Thank you

luc

Hi Luc,

I will check with the developers and get back to you

Cheers
Paul

Great! Looking forward to it

luc

Hi Luc,

That page wont load for me actually.
There is a way to tweak the position if using the smoothscroll links, but direct anchors wont have any effect.
If I can see the page I may be able to help further.
Thanks!

Hi Anthony, thank you for your reply.
Sorry, I'm experiencing some problems with the hosting company.
shoukd be online again, can you retry?

webinprogress.be/todoroff/nl/teksten/mystiek/111-grondslagen-en-doorwerking-van-de-religieuze-vrouwenbeweging-in-de-extatische-mystiek-en-new-age

Sorry for the delay - that page still doesnt load for me.

Actually loaded now ... one sec

Hi LUc,

This tutorial should help:
www.itsupportguides.com/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/

Just add the css they recommend to the custom.css of your theme.
Thanks

Hi Anthony

thank you for your tip.

First off all, the link to the site has changed: it should load now:

todoroff.info/nl/teksten/mystiek/111-grondslagen-en-doorwerking-van-de-religieuze-vrouwenbeweging-in-de-extatische-mystiek-en-new-age

As you can see I added the css you recommended. It works but unfortunately it creats a margin gap in de text.
You can try by scrolling down and then click on an achor .. not a very nice result ...

Yes I think it assumes the anchor is attached to a heading tag. Can you change display: block to inline-block to see if that fixes it?

Thanks

I see no changes with the inline-block.
perhaps I'm not doing it correct
I have the following in my css now:

:target:before {
content:"";
display: inline-block;
height:65px; /* fixed header height*/
margin-top:-20px; /* negative fixed header height */
}

Hi

Shouldn't this be

:target:before {
content:"";
display: inline-block;
height:65px; /* fixed header height*/
margin-top:-65px; /* negative fixed header height */
}

Cheers
Paul

I'm affraid not

In this case the anchors are all hidden behind the sticky nav again ...

See also:

todoroff.info/nl/teksten/mystiek/111-grondslagen-en-doorwerking-van-de-religieuze-vrouwenbeweging-in-de-extatische-mystiek-en-new-age

ah ok the one I tested seemed to work

does it work for you if you increase

:target:before {
content:"";
display: inline-block;
height:85px; /* fixed header height*/
margin-top:-85px; /* negative fixed header height */
}

nope, if I use the same amount for the height and for the margin-top nothing changes.

odd as if I change it in the browser to 85px it seems to work for me on

todoroff.info/nl/teksten/mystiek/111-grondslagen-en-doorwerking-van-de-religieuze-vrouwenbeweging-in-de-extatische-mystiek-en-new-age#ftnref4

At the moment I still see 65px

Can you change it to 85px

Cheers
Paul

I just changed it in the css
no change here ...

Hi

Just to check I'm doing this right - I'm clicking 1-4 at the bottom of the page?

It does work for me on these 4 foot notes



Cheers
Paul

Can I also check which browser you are using? it is possible a different browser may render the font 1pt different

Also have you cleared your browser cache?

Cheers
Paul

UPDATE: it seems to work in Safari and Chrome
not in Firefox though ...