Sticky table of contents on the sidebar

Hi there,

Try this CSS:

.single #right-sidebar {
    position: sticky;
    top: 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Hi Leo,

Thanks for such a prompt and awesome response. Works like a charm!

There is however one thing.. on mobile the TOC is shown after the post contents.

Is there any way I can show the TOC before the first H2 (only for mobile)?

Try this CSS:

@media (max-width: 768px) {
    .site-content {
        display: flex;
        flex-direction: reverse-column;
    }
}

Hi Leo, tried the code but then the sidebar with TOC is also visible on mobile and the content width gets broken.

So I removed your code, now the TOC is at the end of the content on mobile. (it's oke for now)

But ran into something else now, the layout's width on single post only seems to be broken, as the header and the footer are not full width anymore.

I'm using the "READ" site template from the library.

Attached this image for the mobile view. I hope you can help with a fix here :)
https://prnt.sc/uo6w7y

Hi there,

the overflow is being caused by the Pros / Cons tables.
Add this CSS to fix the problem:

.cg-pc-row > * {
    box-sizing: border-box;
}

Hi David,

There was indeed something with my pros & cons and your code fixed that!
Many many thanks!!

Have a nice weekend!

You're welcome

Hi there,
I added the css mentioned above to make the easy table of contents sticky in the right sidebar. But it doesn't seem to work.

.single #right-sidebar {
position: sticky;
top: 0;
}

Here's the post, https://potentialparadigms.com/blog/life/untethered-nomadic-lust

Thank you

Try this instead:

.single #right-sidebar .inside-right-sidebar {
    position: sticky;
    top: 0;
}