[Resolved] How to make a horizontal sticky Table Of Content

Home Forums Support How to make a horizontal sticky Table Of Content

This topic contains 7 replies, has 3 voices, and was last updated by  David 1 month, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1245319

    David

    Hi! I have been struggling trying to find out how to make a TOC like the one seen here:

    https://www.indietraveller.co/cambodia-travel-guide/

    Where you can see the different headings such as: Map & Route, Angkor Wat and so on. I really like the look of it and want to make the same on my website but i can’t figure it out

    I have the Easy TOC plugin installed

    I hope you can help!

    #1245538

    Leo Customer Support

    Hi there,

    Unfortunately it looks like the example site custom coded the TOC and not using a plugin.

    It would certainly require a custom solution to make something like that which is outside of this forum scope.

    #1246196

    David

    Hey Leo! Thanks for the answer.

    How about this example? Is it also custom coded?

    https://www.thebrokebackpacker.com/backpacking-south-america-travel-guide/

    The section “Jump to” is what interests me.

    Can this be done by adding CSS in the “additional CSS” section or how does it work? I have also downloaded the “Simple CSS” plugin.

    I found this on Wikipedia but i have no idea how and if it works .

    /* {{pp-template}} */
    .horizontal-toc-align-center {
    margin-left: auto;
    margin-right: auto;
    clear: none;

    Hope you can give me a hint on this one. I have never worked with CSS but i guess it’s time to learn!

    Best
    David

    #1246470

    David Customer Support

    Hi there,

    the art of understanding CSS is knowing the HTML you’re working with. View one of your posts, now right click over the TOC and Inspect – you’ll see something like this in the Elements panel of the browser developer tools

    The #ez-toc-container should be what you’re looking for.
    And we need to target the Unordered List element: <ul> and the list <li> within it like so:

    /* Make the list a horizontal flex */
    #ez-toc-container ul {
        display: flex;
    }
    
    /* Add some space between list items */
    #ez-toc-container ul li {
        margin-right: 10px;
    }
    
    /* Add some padding to the list item */
    #ez-toc-container ul li a {
        padding: 5px;
    }
    
    /* remove the counters if they are visible */
    #ez-toc-container ul li a:before {
        content: '' !important;
    }

    That should point you in the right direction

    #1248130

    David

    Hey David.

    Thank you so much. This really helped me.

    Last questions:
    Do i have to do this on every single page? and how do i save the changes?

    Right now i have been clicking “Inspect” and editing in there. But when i reload it goes back to normal..

    Thanks!

    #1248149

    David Customer Support

    Add the CSS to the Customizer > Additional CSS and publish it.
    Then it will apply to all pages where a TOC exists.

    #1249012

    David

    This was super helpful. I learned a lot of new stuff right there.

    Thanks a lot!

    David

    #1249507

    David Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.