- This topic has 6 replies, 4 voices, and was last updated 4 years, 3 months ago by
.
-
Posts
-
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/KHcYM9JI 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.
Customer Support
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. 😀
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.
Customer Support
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.
Customer Support
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/
- You must be logged in to reply to this topic.
