Table of contents issue [https://ghost.org/docs/tutorials/adding-a-table-of-contents/]

Developer help
1

Hello.

So, I followed this tutorial : How to add a table of contents to your Ghost site

I wanted to make a sticky table of contents (like shown at the bottom). The problem is, I just can’t figure out how to get the alignment of the content (text) back.

From what I understand, the code creates a grid with 2 columns in 1 column the content of the post in the other the TOC. But I can’t figure out values or another way to do it to align the content back in the middle.

A screenshot of the issue :

not_aligned
not_aligned1533×880 107 KB

Here’s the modifications I made to post.hbs

post_hbs

And here’s the modified CSS (since it seemed to be outdated) :

.gh-content h2,
.gh-content h3 {
    outline: none;
}
body {
    overflow: visible;
}
.cont {
    display: grid;
    grid-template-columns: 1fr 0.2fr;
    padding: 0 0 6vw;
    margin: 0;
}
.toc-container {
    order: 1;
}
.toc-container .toc {
    position: sticky;
    top: 70px;
    min-width: 260px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-size: 1.6rem;
    line-height: 1.6em;
    padding: 0 0.8em;
}
.is-active-link::before {
    background-color: #3eb0ef;
}
ol.toc-list {
    margin: 0;
}

Thanks in advance for any help :slight_smile:

2

This isn’t a direct reply but there was extensive recent discussion of getting ToCs to work in a thread I started here

Maybe it will be helpful! :slightly_smiling_face:

3

Thanks for the reply.

I actually already got the regular ToC working. I really wanted to have the ToC floating at the side. Everything is actually working well, except that my content is not aligned with the header anymore … And I can’t figure a way to make it fit correctly…

Anyway, again, thanks for the reply :slight_smile:

4

Nobody ? :cry: