Offset for sticky menu

SimpleTOC uses native SmoothScroll since a few updates. You can try to configure that with css.

Ohh, that’s too bad. The integration via generatepress was one of the reasons why I had decided to use this plugin ??

Can you please give me a CSS example?

I don’t know any. The reason why i opted in for the native css solution is that this way it does not depend on any outside css of special plugins but uses standard code. I am really sorry but i can’t help you

OK – I understand.
However, a TOC plugin should also be able to handle an offset in some way. Sticky menus are very common nowadays.

For all others who have this problem too. The following CSS should work in modern browsers (please adjust the value height and margin to your own requirements):

:target:before {
    content: "";
    display: block;
    height: 70px;
    margin: -70px 0 0;
}

SmoothScrolling can be added by a separate plug-in and has nothing to do with generating a TOC. Maybe it was a mistake to add smooth scrolling in the first place. The basic native implementation should work for 99 % of all themes. Anything special needs to be treated in a special way. And SimpleTOC is simple and I will always aim at code that is simple, too without custom code. That makes SimpleTOC versatile for many themes without adding to much complexity. I know that this is not for everyone.

I’m having the exact same problem. I have a sticky navigation, but TOC links are hiding behind that navigation when I clicked on it.

Adding this line of CSS does not work for me

:target:before {
    content: "";
    display: block;
    height: 70px;
    margin: -70px 0 0;
}

Can you please suggest any other solution?

And I agree, TOC plugin should have an option to set the top-offset.

Hi @aakashgill,
it is difficult to say without seeing the website. Do you use a pagebuilder?

• This reply was modified 1 year, 2 months ago by dieter93.

I’ve used Gutenberg Editor to add this.
As you can see in the screenshot, the black header is sticky and is coming on top of the heading when I clicked on the TOC link.

As I already explained: it is hard to come up with a solution that works for every theme. And If I just add that css above from @dieter93 and make the value configurable within the settings of SimpleTOC it will not work for @aakashgill and so on. I could add a negative margin to all anchors but that cause side effects… I ill try to find a native way to tackle this…. but no promised since this can be individually fixed. And has nothing to do with SimpleTOC. Every link with a label will have this problem. It does not matter if it is generated by SimpleTOC or not.