Archived topic
Table of contents link cut off by sticky header
9 replies · Started by Graeme on January 27, 2023
My sticky header is cutting off my blog article when the table of contents is used. Whenever I click any of the options in the table of contents it takes me to the part of the article but the top part is cut off by the sticky header.
I've left an example of a page in the private info
Hi there,
Can you try using GP's smooth scroll script?
https://docs.generatepress.com/article/smooth-scroll/
Then it should account for the height of the header/navigation.
Let me know :)
Thanks smooth scroll worked!
Glad to hear :)
Sorry to reopen this Leo but can you please check in the private information the page I'm linking. All other link menu items smooth scroll but the top link for "Why Can't Dogs Eat Raisins?" doesn't smooth scroll.
I can't see what I've done wrong?
Smooth scroll works for the top link in my other posts so I can't see what the difference is.
I don't see an ID attached to the first headline.
https://www.screencast.com/t/2RmzbGOunwpQ
The code snippet is below. It's the first list item #cant-eat/Why Can't Dogs Eat Raisins that doesn't smooth scroll
<!-- wp:list {"style":{"typography":{"fontSize":"18px"}},"className":"smooth-scroll"} -->
<ul class="smooth-scroll" style="font-size:18px"><!-- wp:list-item -->
<li><a class="smooth-scroll" href="#cant-eat"><strong>Why Can't Dogs Eat Raisins?</strong></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a class="smooth-scroll" href="#how-many"><strong>How Many Raisins Can a Dog Eat?</strong></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a class="smooth-scroll" href="#symptoms"><strong>What Are The Symptoms of Raisin Toxicity?</strong></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a class="smooth-scroll" href="#what-to-do"><strong>What Should I Do If My Dog Eats Raisins?</strong></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a class="smooth-scroll" href="#treatment"><strong>What Treatment Will a Vet Do For Raisin Toxicity?</strong></a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a class="smooth-scroll" href="#what-now"><strong>What Now?</strong></a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->Please take a look at my previous reply and screenshot again:
https://generatepress.com/forums/topic/table-of-contents-link-cut-off-by-sticky-header/#post-2516324
The ID is missing from the actual headline Why Can’t Dogs Eat Raisins? so the link isn't doing anything.
Ahh! My bad! Thank you Leo.
No problem :)