Table of contents (tocbot) is on top of post content

Integrations & API
1

I’m using the Tocbot integration to have Table Of Contents on my posts. I followed the official tutorial on the Ghost website.

However the TOC takes up space on top of the post content instead of appearing on its side.

This is the issue I’m talking about:

website_toc_glitch
website_toc_glitch1900×965 272 KB

Scrolling down is fine and the TOC sticks to the left side, following the content as intended.

This is my post.hbs file in case it’s relevant:

{{!< default}}

<aside class="gh-toc"></aside> {{! The TOC will be inserted here }}

<div class="content-area">
    <main class="site-main">
        {{#post}}
            {{> content width="wide"}}
        {{/post}}
        {{#is "post"}}
            {{#if @custom.show_related_posts}}
                {{> related}}
            {{/if}}
            {{> comment}}
                <script src="https://utteranc.es/client.js"
                        repo="Zerodya/comments"
                        issue-term="title"
                        theme="dark-blue"
                        crossorigin="anonymous"
                        async>
                </script>
        {{/is}}
    </main>
</div>

How can I fix this issue?

EDIT: My website here.

2

You’ll need to move the TOC into .gh-content. You’ll likely need to do a bit more work, though, to get it to play nice with your theme.

Also, the TOC tutorial has been updated. The new code should work a bit better.

3

I followed the post again and the new code indeed works better. Everything works as it should now, thank you.

1 Like
4

I am wondering how can I inject the tocbot after the second h2 on the Casper theme? Is there any way?