- This topic has 9 replies, 5 voices, and was last updated 3 years, 9 months ago by
.
-
Posts
-
Hello guys,
Saw a similar topic about this but no actual solution.
I’ve created a TOC using the “easy table of contents” plugin.Placed this TOC as a widget in the right sidebar of blog posts.
The end goal is to have the TOC on the sidebar, moving along as I scroll down, and also highlighting the corresponding header / section.Please share any CSS code that would enable what I need and also where to place it 🙂
Cheers
Customer Support
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/uo6w7yCustomer Support
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
Customer Support
Try this instead:
.single #right-sidebar .inside-right-sidebar { position: sticky; top: 0; }
- You must be logged in to reply to this topic.
