How to make a horizontal sticky Table Of Content

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?

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

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

Thanks!

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!

David

You're welcome