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

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

  • This topic has 7 replies, 3 voices, and was last updated 1 year ago by David.
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
    Staff
    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
    Staff
    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
    Staff
    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
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.