Return to previous page

Please guide me how to fix table of contents in Elementor

This topic has 12 replies, 3 voices, and was last updated 4 months, 1 weeks ago ago by Andrew Mitchell

JoHuCa

Participant

June 13, 2024 at 04:20

Hello 8theme
Please guide me how to fix table of contents in Elementor
I want the table of contents in Elementor to only display items 7 – 12, items 1 – 6 and 13-14 do not need to be displayed.
see link
But it’s still full and I tried to fix it but couldn’t. I don’t specialize in website design.
Please guide me how to set it up.
I looked at the CSS tutorial in elementor and still don’t understand what to do. Please guide me specifically for my content so I can do it in future articles.
Best regards

Please, contact administrator
for this information.

#399525 Copied Theme version: 9.3.12

11 Answers
Luca Rossi

Support staff

June 13, 2024 at 08:32
Hi @JoHuCa,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.postid-6692 .elementor-toc__list-item:nth-child(-n+6),
.postid-6692 .elementor-toc__list-item:nth-child(n+13) {
    display: none;
}
```
Hope it helps!
#399569 Copied
JoHuCa

Participant

June 13, 2024 at 10:50

Hello Luca Rossi
Thanks for your support.
However, adding the above CSS code can only be applied to posts with the above id.
If I update the content of the article itself, the website will not be updated.
Later with another article, I also had to add similar CSS to Theme Custom CSS > Global CSS:
Please help me with further instructions on how I can use the Container box right in the elementor of the article.
Currently, the Collapse Subitems feature is not available. I also want to use the Collapse Subitems feature (Additional Options > Collapse Subitems)
Please give me more instructions.
Best regards,

Files is visible for topic creator and
support staff only.

#399585 Copied
Luca Rossi

Support staff

June 13, 2024 at 11:09
Dear @JoHuCa,

We recommend that you review the following article for detailed guidance: [Table of Contents Pro](https://elementor.com/help/table-of-contents-pro/).

Additionally, for the container of your posts, please use the following CSS class:
```
.entry-content
```
Should you require further assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team
#399591 Copied
JoHuCa

Participant

June 13, 2024 at 15:25

Hi Luca Rossi
Thank you for the above instructions
I have created a ToC
There is other content I want to ask.
1. On page https://johuca.com/digital-marketing-in-marketing-5-0/ , the ToC slides along with the content
But on the page https://mientay.day/tom-the-chan-trang-vua-tom-cong-nghe-cao-5/, I just created, the ToC doesn’t slide along with the content when I scroll down to the content at the bottom of the page.
Please guide me how to set up, both pages have the same theme.
2. Some content with H2 looks blurry and small compared to H3. I want to adjust it the other way around.
for example, currently: https://mientay.day/tom-the-chan-trang-vua-tom-cong-nghe-cao-5/
H2: “Tôm thẻ chân trắng thích nghi với điều kiện tự nhiên Việt Nam” (smaller letter than H3)
H3: “Vòng đời:” (larger letter than H2)
You give further instructions.
If using CSS for H2, how should I add CSS?
Best regards,

#399647 Copied
Luca Rossi

Support staff

June 14, 2024 at 05:54
Hi @JoHuCa,

1. To make the table of content sticky, please enable the Sticky for the column: https://elementor.com/help/sticky-scrolling-effect-pro/

2. To adjust the style of h2, h3, h4 in the text widget, please try with this custom CSS:
```
.elementor-widget-text-editor h2 {
font-size: 26px;
}
.elementor-widget-text-editor h3 {
font-size: 22px;
}
.elementor-widget-text-editor h4 {
font-size: 18px;
}
```
Hope it helps!
#399715 Copied
JoHuCa

Participant

June 17, 2024 at 10:51

Hello
Thank you for the guide adjust the style of h2, h3, h4
I have done dynamic TOC.
However, there are some errors displayed and I cannot resolve them.
Photo link
1. TOC will have a border over the header or footer. I have adjusted it in a number of ways but it doesn’t work.
With johuca.com, the ToC is displayed clearly and does not overlap the header or footer.
Hope you can help.
2. By the way, I would like to ask: how can the height size of the “your comment” section under “Leave a reply” be changed?
(When creating a new page and also in a new article)
Best regards

Please contact administrator
for this information.

#400165 Copied
Luca Rossi

Support staff

June 17, 2024 at 12:15
Hi @JoHuCa,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
/* header overlap issue */
[data-elementor-type="header"] {
    z-index: 9;
    position: relative;
}
/* Comment height */
body textarea#comment {
    height: 100px;
}
```
Hope it helps!
#400179 Copied
JoHuCa

Participant

June 17, 2024 at 12:58

Hello @Luca Rossi
Thank you for the guide
I followed the instructions.
However, there are some errors displayed and I cannot resolve them.
Photo link
1. TOC still has a border over the header
Hope you can help.
2. Height size of “your comment” section under “Leave a reply”:
2.1. page has not changed.
2.2. The post has changed but there is an error space above (see photo).
Please provide further instructions
Best regards

Please contact administrator
for this information.

#400189 Copied

Luca Rossi

Support staff

June 18, 2024 at 05:50

Dear @JoHuCa,

We hope this message finds you well. We have recently made some modifications to the custom CSS codes and would appreciate it if you could review them at your earliest convenience.

Please find the updated codes at the following links:
– [https://prnt.sc/XnhghofPGEt0](https://prnt.sc/XnhghofPGEt0)
– [https://prnt.sc/PRfpD-prbATa](https://prnt.sc/PRfpD-prbATa)

Thank you for your attention to this matter. We look forward to your feedback.

Best regards,
The 8Theme Team

#400264 Copied

JoHuCa

Participant

June 20, 2024 at 11:55

Hi @Luca Rossi
Thank you for your support
Best regards,

#400649 Copied

Andrew Mitchell

Support staff

June 20, 2024 at 11:56

Dear JoHuCa,

We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

Click here to spread the love: https://themeforest.net/downloads

Thank you for being an integral part of our journey!

Best Regards,
The 8Theme Team

#400650 Copied
Tagged: elementor guide, elementor tutorial, fix elementor table of contents, table of contents fix, woocommerce elementor help, woocommerce wordpress templates, wordpress elementor issues
Viewing 12 results - 1 through 12 (of 12 total)

The issue related to '‘Please guide me how to fix table of contents in Elementor’' has been successfully resolved, and the topic is now closed for further responses

Please guide me how to fix table of contents in Elementor

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection