[Resolved] Sticky table of contents on the sidebar

Home Forums Support Sticky table of contents on the sidebar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1459174
    Andrei

    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

    #1459175
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

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

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

    #1459185
    Andrei

    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)?

    #1459333
    Leo
    Staff
    Customer Support

    Try this CSS:

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

    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

    #1460008
    David
    Staff
    Customer 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;
    }
    #1460110
    Andrei

    Hi David,

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

    Have a nice weekend!

    #1460311
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.