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

Home Forums Support [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 2 years ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1245319

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


    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!

    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.


    Hey Leo! Thanks for the answer.

    How about this example? Is it also custom coded?


    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!


    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


    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..


    Customer Support

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


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

    Thanks a lot!


    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.