[Resolved] Table of Content on the Side

[David]

Oops sorry was meant to provide the link to this doc:

https://docs.generatepress.com/article/adding-php/

[Atif]

Alright done. I have added the snippet.

[David]

Ok, so now try adding this CSS – note the screen has to be 1500px for it to move the ToC from the Content to the sticky left side:

@media(min-width: 1500px) {
    .single-post #page {
        max-width: 1500px;
        padding-left: 300px;
        position: relative;
    }
    
    div#ez-toc-container {
        position: absolute;
        top: 14px;
        left: 0;
        bottom: 0;
        max-width: 300px;
        background-color: transparent !important;
        border: none !important;
        width: 100%;
        z-index: 1;
        display: flex;
        flex-direction: column;
        border: none;
    }

    .custom-toc-wrapper,
    .ez-toc-title-container {
        position: -webkit-sticky;
        position: sticky;
        top: 90px;
        border-radius: 10px;
        border: 2px solid #000;
        box-shadow: 5px 0 #b20c20;
        border-style: dashed;
        background-color: #fff;
        overflow: hidden !important;
    }

    .ez-toc-title-container {
        top: 20px;
        padding: 20px;
        border-radius: 10px 10px 0 0;
        border-bottom-width: 0;
    }
    div#ez-toc-container p.ez-toc-title {
        font-size: 17px !important;
    }
    #ez-toc-container ul {
        margin: 20px !important;
    }
}

[Atif]

This looks awesome. Just as I wanted.

There is one very slight issue. The containers i.e the title and list container tend to overlap when I scroll. Not a huge issue, but I am afraid that this may cause CLS issues with Core Web Vitals scores.

[Elvin]

Hi there,

I checked the site and I didn’t see any overlap. But in case I’ve missed it, can you provide a screen recording of its occurrence? Is this happening on mobile as well? if yes, can you share the device you’ve checked it on?

Let us know. 😀

[Atif]

Yes nevermind, I checked again, looks good.

You guys are awesome. Thank you so much for helping me out with this.

Best Regards
Atif

[Elvin]

No problem. Glad to be of any help. 😀

[Author]

Posts