How to make a horizontal sticky Table Of Content

[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!

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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

Thanks a lot!

David

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts