Table of Contents

Design help Custom code
#1

I am trying to integrate Table of Contents(TOC) to my website. Everything is working but when I click on an element in the left side TOC link the page was scrolling to the correct section but that was hiding behind the menu bar. I am completely confused how to get rid of this. Can someone help me regarding the same.

Here my site link: https://krishnas-exceptional-site-73318b.webflow.io/

#2

You could easily solve this issue by not using a fixed header. If that is a requirement then you could add padding top to the content anchors or look into using CSS scroll-padding-top on the HTML element for example.

html{
  scroll-padding-top:120px;  
}

That works in most browsers but not all. See → "scroll-padding-top" | Can I use... Support tables for HTML5, CSS3, etc

#3

I just tried but that didn’t worked