Table of contents in Headline theme

Themes
#1

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:

43-Ideas-for-making-money-online-in-2022-where-to-look-earnings-
43-Ideas-for-making-money-online-in-2022-where-to-look-earnings-1158×1032 132 KB

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.

#2

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
#3

It works!
Thank you for your help :)

#4

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

1 Like
#5

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

#6

Thanks for letting me know :heart:

Updated the tutorial again. Check it out:

1 Like
#7

Thank you for your help! Unfortunately, i found another bug :smiley:

After adding the table of contents on the mobile version of the site, when scrolling, the page sort of “jumps” at the headings.

This only happens on mobile.

In my case an iPhone 12 pro max.

Video from my phone: Imgur: The magic of the Internet
demo: Best monitors for consoles. A ranking of recommended monitors for gamers

#8

What I think is happening here is that Tocbot is collapsing and expanding your TOC as you scroll, which is causing the jumps. This is more prominent on posts with lots of headings.

Unfortunately, this is part of how the library works. One workaround is to make the TOC totally expanded by default. You can do this by adding collapseDepth: 6 to the Tocbot config. The (potential) downside here is that your TOC will be totally expanded and won’t have that collapse effect.

Two other unrelated suggestions. Updating your CSS will make the TOC appear a bit better.

You can remove height: 0 and change padding-right: 8rem to padding-right: 1.6rem.