Okay
  Public Ticket #2571488
Including Table of Content
Open

Comments

  •  2
    Matt started the conversation
    Include a table of contents

    We want to include a Table of contents — that serve as anchor links to specific sections of the post— on our blog posts. We are struggling to figure out how we can achieve this.

    Below is a link of what we are trying emulate:

    https://ibb.co/0FnCBNq

  •  550
    Gabriel replied

    Hi Matt, I recommend using this plugin: https://wordpress.org/plugins/ultimate-addons-for-gutenberg/

    TOC Gutenberg block looks like this:

    6996751206.png


  •  2
    Matt replied

    Gabriel - we do not have this type of view. We added the ultimate add ons for gutenberg plugin and nothing in our UI looks like this. 

    Is it possible to jump on a video screen share? or send a screen recording of how we can setup our wordpress to accommodate this exact setup?

  •  550
    Gabriel replied

    Ok, I think I understand. You're using Hybrid Composer for blog posts.

    In this case you can use WordPress editor to manually add titles in table of contents. Links should look like this:

    7435355575.png

    Get the section id by clicking the cog wheel icon (top right):

    1573765847.png


  •  2
    Matt replied

    Got it - I understand how to make the linking happen, but we are looking for the design as well.


    How would you recommend we achieve the design aspect for the table of contents. Is there an element you recommend or code you recommend we look into?


    The attached screenshot is exactly what we are trying to emulate.

    Attached files:  Screen Shot 2020-10-15 at 8.22.29 PM.png

  •  550
    Gabriel replied

    Hi, you can do it with some custom CSS. First, you need to split the layout in two equal columns, then add this code to WordPress Editor:

    <span class="section-number">01</span> <a href="#section-1">Section Title</a>
    6329387068.png

    For the section number, add this to Theme Options - Customizations - CSS Global:

    span.section-number {
        color: #fff;
        font-weight: 600;
        background: #000;
        padding: 5px;
        border-radius: 3px;
        margin-right: 10px;
    }
  •  2
    Matt replied

    Thank you - How would we link to the different header sections on the post?

  •  2
    Matt replied

    Gabriel - We have the anchor links working now.


    My next question is:

    I'm using a static bar at the top of my site, about 20px high. When I click an anchor link, the text disappears behind our navigation bar.


    Then we have to scroll back a bit each time. Is there a way to avoid this? Some CSS or Javascript setting to manipulate how far down it drops?

  •  2
    Matt replied

    We found the following post:


    https://stackoverflow.com/questions/11501025/div-anchors-scrolling-too-far


    I am interested in the javascript solution, but am afraid to implement, because:


    1. I do not know where I could implement the Javascript globally on the theme

    2. I do not want to break the theme

  •  550
    Gabriel replied

    Can you show me exactly what you're trying to fix?

  •  2
    Matt replied

    Unfortunately, it is not letting me send a video. I sent attachments.

  •  2
    Matt replied

    ***Error Uploading Attachment - Please see new comment***

  •  2
    Matt replied

    When we click the contents links, it drops us to the anchor. This is expected. But now our Nav bar which is fixed is covering the actual link. 

    So then we have to scroll up a bit to see it.

    Attached files:  Screen Shot 2020-10-19 at 9.03.25 AM.png
      Screen Shot 2020-10-19 at 9.03.19 AM.png

  •  550
    Gabriel replied

    Ok, got it. It's about the scroll offset. Give me a few minutes and I'll get back with the fix.

  •  550
    Gabriel replied

    All right, add this to Theme Options - Customizations - CSS Global:

    html {
      scroll-padding-top: 240px;
    }

    This will use 170px for all scroller elements, including anchor links. Adjust the value if needed.


  •  2
    Matt replied

    Thank you - Anyway I can make this only for our blog posts? I wouldnt want this affecting other pages.

  •  550
    Gabriel replied

    Unfortunately this property doesn't work on body elements, just html.

    But you will run into the same issue with all scroll items, so this is a general fix.

    Another solution would be to add this to Page CSS, but you'll need to do it on each post.

    6830172192.png