Table of contents in Headline theme

I have installed exactly step by step the table of contents according to this guide: How to add a table of contents to your Ghost site

The table of contents shows up fine on the mobile version of the site, but on the computer it creates a big blank space as in the picture:

Here you can see it live: 43 Ideas for making money online in 2022. (where to look + earnings)

Does anyone have a solution on how to fix this?

The Ghost website states:

In this tutorial, we’ll be using Ghost’s default theme, Casper, but the steps here apply to any Ghost theme.

So it should work with the official template.

This is happening because of how CSS Grid works.

Try adding the following to your CSS:

@media (min-width: 1300px) {
    .gh-toc {
        position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
        top: 4vmin;
        grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
        height: 0; /* This should fix the spacing issue */
        padding-right: 8rem; /* This will give your TOC a bit more room to breath */
   }

I’ll look at updating the TOC tutorial to reflect these changes. :smile:

2 Likes

It works!
Thank you for your help :)

No problem! Let me know if you run into any other bugs.

1 Like

Unfortunately, I found another bug - when the table of contents is too long its elements invade the footer
Video how it looks: footer
Live post: here

Thanks for letting me know :heart:

Updated the tutorial again. Check it out: