Archived topic
Table of Content on the Side
21 replies · Started by Atif on July 22, 2021
Oops sorry was meant to provide the link to this doc:
Alright done. I have added the snippet.
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;
}
}
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.
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. :D
Yes nevermind, I checked again, looks good.
You guys are awesome. Thank you so much for helping me out with this.
Best Regards
Atif
No problem. Glad to be of any help. :D