Blog page scrolls too far down

Dear Webflow Community,

On my website I have an issue with the Blog Page. It has a table of contents element (built with finsweet attributes, but that’s not important) that recognizes H2 and H3 headings inside the blog text, and when you click on the elements in the ToC, it scrolls to that part of the text.

Issue is, that browser scrolls it to the very top of that part of the text, so the text gets covered with the navbar, thus text heading is not seen. I’ve applied a temporary solution - added interaction to the whole page, so when it scrolls down, navbar hides, and shows on the scroll up.

But I was wondering if there is any solution that can make it scroll so that H2/H3 heading is not at the very top of the page but a little closer to the middle. Considering that those elements are inside of the Rich Text and padding/margin can’t be added to them.

Thank you.

Here is my public share link: LINK
(how to access public share link)
And here is published website link: LINK

Hi there,

For table of contents scroll behavior and navbar overlap issues, here are some effective solutions:

To adjust the scroll offset when clicking table of contents links, add a negative margin-top to your section IDs using this custom CSS:
[id] {
scroll-margin-top: [your navbar height]px;
}

If you’re experiencing issues with the navbar overlapping content, add padding-top to your main container or first section that matches your navbar height. This creates proper spacing while maintaining smooth scroll functionality.

For more precise control, you can also use Webflow’s built-in smooth scroll settings under Site Settings > General > Smooth Scroll Offset to fine-tune the scroll position.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.