Archived topic
Table of Contents - Custom CSS
6 replies · Started by Mihail on December 19, 2021
Hello, I installed the "SimpleTOC - Table of Contents Block" plugin, and it works perfectly with GeneratePress block elements. I wanted to put the Table of Contents on my left sidebar, and GeneratePress allowed me to do it quickly.
I want to customize my Table of Contents element with custom CSS. I need your help with this.
1. I want to decrease the line space between elements in the same H2 element.
2. I want to increase line space between different H2 tags.
Here is a screenshot of my TOC, and there you can visually see what I want to do.
https://imgur.com/KHcYM9J
I want my TOC to be similar to the TOC of ahrefs: https://ahrefs.com/blog/seo-report-template/
3. How do I make this TOC block sticky, with some white space on top of it like Ahrefs Single Blog posts?
4. How do I highlight which section I am on the web page while scrolling and show it on the TOC? Please see the website inspiration I mentioned above.
I apologize for my long request. I struggle with adding custom CSS, and I couldn't find any help for my situation elsewhere.
I really appreciate any help you can provide.
Hi there,
1. I want to decrease the line space between elements in the same H2 element.
2. I want to increase line space between different H2 tags.
I'm not sure what you mean by these 2:
Were you trying to lay it out like this? https://share.getcloudapp.com/4guZ0orQ
If so, try this CSS:
.dynamic-entry-content h2 {
margin-bottom: 1.5em;
margin-top: 1em;
}The margin-bottom increases the space below the h2. The margin-top increased the space above the h2.
3. How do I make this TOC block sticky, with some white space on top of it like Ahrefs Single Blog posts?
add this CSS:
@media (min-width:769px){
.inside-left-sidebar {
position: sticky;
top: 80px;
}
}4. How do I highlight which section I am on the web page while scrolling and show it on the TOC? Please see the website inspiration I mentioned above.
You'll have to ask SimpleTOC if they have this a feature like this for their TOC elements. :D
Hello Elvin!
Thank you for the throughout the reply.
1. I want to decrease the line space between elements in the same H2 element.
2. I want to increase line space between different H2 tags.
I mean by these two by customizing the line space in the Table of Contents. How do I customize that without affecting the body text or headings in the article?
Many thanks for considering my request.
Try this CSS:
.inside-left-sidebar .simpletoc li {
padding-bottom: 10px;
}Thanks for the help! Everything works fine now.
If you don't mind, I have one more request regarding the TOC on my left sidebar.
1. How do I make the TOC appear only after scrolling past the H2 header?
2. Also, how do I make the transition appear smoothly? An example of this is https://ahrefs.com/blog/seo-report-template/ on the desktop version.
Thank you so much for your attention and participation.
Hi there,
to make the ToC appear after scrolling past a specific place would require Javascript. Unfortunately that outside of this forum's scope:
https://generatepress.com/what-support-includes/
