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 8 months ago ago by Andrew Mitchell

  • Avatar: JoHuCa
    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
    Avatar: Justin
    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
    Avatar: JoHuCa
    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
    Avatar: Justin
    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
    Avatar: JoHuCa
    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
    Avatar: Justin
    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
    Avatar: JoHuCa
    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
    Avatar: Justin
    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
    Avatar: JoHuCa
    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
    Avatar: Justin
    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
    Avatar: JoHuCa
    JoHuCa
    Participant
    June 20, 2024 at 11:55

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

    #400649 Copied
    Avatar: Andrew Mitchell
    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: , , , , , ,

  • 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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Ecotransport Store – WordPress WooCommerce Theme
lazy-placeholder
Water Delivery – WordPress WooCommerce Theme
lazy-placeholder
Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Business Card – WordPress Theme
lazy-placeholder
Cocktails Store – WordPress WooCommerce Theme
lazy-placeholder
Burger Store – WordPress WooCommerce Theme
lazy-placeholder
Restaurant – WordPress WooCommerce Theme
lazy-placeholder
Sushi Store – WordPress WooCommerce Theme
lazy-placeholder
Gaming – WooCommerce Theme
lazy-placeholder
Spa – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.