Add a title to your Tocbot TOC

[ScottSemple]

I used this tutorial to add a TOC to my posts. However, that method doesn’t include a title for the TOC, so it becomes unlabeled headings in the margin, like so:

The following CSS will add a title similar to what Ghost itself uses. (Edit “Table of Contents” to whatever title you prefer.)

    .gh-toc::before {
      content: "Table of Contents";
      display: flex;
      font-weight: bold;
    }

To add some space between the title and the headings, add padding to toc-list:

    .toc-list {
        overflow: hidden;
        padding-top: 10px;
        list-style: none;
    }

The result:

[block]

Hi, thanks so much for this thoughtful addition! My table of contents looks so much better now. I’m curious, though—if Ghost plans to update that tutorial anytime soon? It feels pretty outdated, especially since their blog now features a far nicer and more polished table of contents.

[ScottSemple]

The styling will depend on the CSS used and will vary by theme.

[block]

Correct, did you notice also this little bug?