Hi!
I am trying to use page jumps for the very first time. ?
I figured out how it works, only my header is causing trouble. The thing I’m linking to is disappearing behind my fixed header.
See here: https://www.fuckdiestudieschuld.nl/minimalisme-dennis-storm/
I noticed I can add a class to the anchors. I could use the class ‘anchor’ to all my anchors and then I think I can change them with CSS?
However, I don’t know what CSS code I should use.
Help is really appreciated!
Thanks,
Maaike
Hi,
You can use a code like this one, seems to work. You can adjust the values in it if needed – https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/
Thanks
That works perfectly! Thank you!
(For future reference, you have to change the number of pixels so it’s the same as the height of your fixed header. You can easily check the number of pixels for your self when you inspect the element. In my case, it wasn’t 90 but 40.)
Hi, yes if you want to be the same height.
I’m glad that you manage it!
Thank you!
Hi!
I just noticed that on mobile the height isn’t working. I guess it should be more pixels?
Could you take a look? ->
https://www.fuckdiestudieschuld.nl/studieschuld-aflossen-stappenplan/
Is there a way to change the number of pixels for mobile? And how many pixels should it be?
Thanks!
Maaike
Hi,
On mobile device you can not make hover, that is why is not working.
Thank you!
Huh?
Hover?
That is not what I am trying to ask.
I would like to adjust the way the page jumps work together with the header for mobile.
Any thoughts?
Hi,
Sorry, was a misunderstanding, you can use the same code as for desktop, and change only the height and margin px, set the code in Theme panel> Custom code> Advance css > phones -> https://i.imgur.com/uJWTEWC.png
Hope this will help you!
Thank you for your understanding!
Oooh, I never even looked at the advanced thing. Haha! Thank you!
Hmm, it doesn’t seem to work. Even if I put in really big numbers, it stays the same.
This is the CSS I use:
:target:before {
content: “”;
display: block;
height: 40px; /* fixed header height */
margin: -40px 0 0; /* negative fixed header height */
}
For desktop this works perfectly.
Should I use something else for mobile?
Hi,
Please try this custom css, you need to set it in Theme panel> Custom code> Advance css > phones
:target:before {
content:"";
display:block;
height:60px!important; /* fixed header height*/
margin:-60px 0 0!important;; /* negative fixed header height */
}
Hope this will help you!
Thank you!
Hey, that seems to work, thank you!
