# Adding a table of contents

**URL:** <https://forum.ghost.org/t/adding-a-table-of-contents/29588>\
**Category:** Developer help\
**Created:** [April 15, 2022, 1:44pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588 "2022-04-15T13:44:44Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![contentjungle](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/contentjungle/32/17409_2.png) [@contentjungle](https://forum.ghost.org/u/contentjungle)\
**Post date:** [April 15, 2022, 1:44pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/1 "2022-04-15T13:44:44Z")

</div>

Hi!

- [blog.gocontentjungle.com](https://blog.gocontentjungle.com)
- 4.43.1

Hi,

I was trying to follow this tutorial: [How to add a table of contents to your Ghost site](https://ghost.org/docs/tutorials/adding-a-table-of-contents/#advanced-styling)

I would like to have it the same as the example in Advanced Styling.  
I added the example code in “screen.css” ( is that correct, or should I add it somewhere else? Also tried global.css)

However, I think .post-content changed to .gh-content

But can’t find what .post-full-content changed to. (Now tried both .article and .post).

The navigation menu is still below my image, and not on the side.

Do you have any advice on what to do?

(Context: I have no developing experience at all haha, just downloaded visual studio code to create this fixed side navigation menu. So probably it’s a very stupid question, but thank you so much in advance for helping me out!)

---

<div class="post-metadata">

**Author:** ![contentjungle](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/contentjungle/32/17409_2.png) [@contentjungle](https://forum.ghost.org/u/contentjungle)\
**Post date:** [April 15, 2022, 2:07pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/2 "2022-04-15T14:07:13Z")

</div>

Okay, fixed it with this tutorial (combined with the other tutorial)!

> **[How to setup the table of contents in ghost.org](https://www.hezhengda.io/how-to-setup-the-table-of-contents-in-ghost-org/)**
>
> We all know table of content is very important for the convenience of the reader
> experience. So that today I will show you how you can add table of contents like
> this:
> 
> The red arrow represents the end result that we want to getOn the...

---

<div class="post-metadata">

**Author:** ![TheRoyalFig](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/theroyalfig/32/27771_2.png) [@TheRoyalFig](https://forum.ghost.org/u/TheRoyalFig)\
**Post date:** [April 15, 2022, 2:25pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/3 "2022-04-15T14:25:11Z")

</div>

Awesome you figured out!

I also put this out there as another resource for adding a TOC in case someone else sees this post:

> **[Add a Table of Contents to Your Website](https://ryanfeigenbaum.com/toc/)**
>
> Ever on a long article and wished you could jump around easily? Or even return to a section quickly? Want to provide this experience to your readers? I'll show you how you can quickly and easily add a table of contents to your website with a few...

It’s what I use on my site, too.

---

<div class="post-metadata">

**Author:** ![contentjungle](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/contentjungle/32/17409_2.png) [@contentjungle](https://forum.ghost.org/u/contentjungle)\
**Post date:** [April 15, 2022, 2:49pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/4 "2022-04-15T14:49:21Z")

</div>

Great, thanks for sharing!

I’ve another question too.

The width of the text my blog post is now very narrrow ([https://blog.gocontentjungle.com/how-to-repurpose-your-blog-content/](https://blog.gocontentjungle.com/how-to-repurpose-your-blog-content/))

Do you have any idea how I can change the width?  
Have tried every max-width in screen.css haha but nothing changes

---

<div class="post-metadata">

**Author:** ![TheRoyalFig](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/theroyalfig/32/27771_2.png) [@TheRoyalFig](https://forum.ghost.org/u/TheRoyalFig)\
**Post date:** [April 15, 2022, 9:22pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/5 "2022-04-15T21:22:36Z")

</div>

So, the TOC is now sharing space with your content, so there’s just less room, which is why your content has become so narrow. Unfortunately, to give the page more space to work it would require some serious reworking of your CSS.

Another approach would be to always have the TOC appear in the same column as your content. That way, your content won’t have to fight for space with the TOC.

---

<div class="post-metadata">

**Author:** ![contentjungle](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/contentjungle/32/17409_2.png) [@contentjungle](https://forum.ghost.org/u/contentjungle)\
**Post date:** [April 17, 2022, 5:26pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/6 "2022-04-17T17:26:49Z")

</div>

Thanks for your response!

Hmm, so there’s no quick fix to create more space for the page?

I found this tutorial: [Ghost blog page width](https://blog.dchidell.com/2016/09/10/ghost-blog-page-width/) which made it seem pretty easy to change, but I couldn’t find this code in my css.

---

<div class="post-metadata">

**Author:** ![TheRoyalFig](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/theroyalfig/32/27771_2.png) [@TheRoyalFig](https://forum.ghost.org/u/TheRoyalFig)\
**Post date:** [April 18, 2022, 4:00pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/7 "2022-04-18T16:00:47Z")

</div>

Unfortunately, that tutorial doesn’t apply to your theme.

You could try adding the following to your **Site Header** in **Settings** \> **Code Injection**. Because this change could affect lots of different pages on your site, you’ll want to test other pages to make sure nothing looks askew.

In the example below, I’ve increased the width by 200 px. However, you can change the `920` value below up or down to suit your needs.

```css
<style>
.gh-canvas {
  grid-template-columns: [full-start] minmax(4vmin, auto) [wide-start] minmax(
      auto,
      240px
    ) [main-start] min(920px, calc(100% - 8vw)) [main-end] minmax(auto, 240px) [wide-end] minmax(
      4vmin,
      auto
    ) [full-end];
}
</style>

```

---

<div class="post-metadata">

**Author:** ![contentjungle](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/contentjungle/32/17409_2.png) [@contentjungle](https://forum.ghost.org/u/contentjungle)\
**Post date:** [April 19, 2022, 9:36am UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/8 "2022-04-19T09:36:08Z")

</div>

Yesss, this works!!! Thank you so much for your help 😄

---

<div class="post-metadata">

**Author:** ![Darren\_Sherwood](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/darren_sherwood/32/10015_2.png) [@Darren\_Sherwood](https://forum.ghost.org/u/Darren_Sherwood)\
**Post date:** [June 22, 2023, 4:09am UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/9 "2023-06-22T04:09:10Z")

</div>

Hi, trying not to start a new question, a am also follow the tutorial which is now here:

> **[How to add a table of contents to your Ghost site](https://ghost.org/tutorials/adding-table-of-contents/)**
>
> Let your readers know what to expect in your posts and give them quick links to navigate content quickly by adding a table of contents with the Tocbot library.

However, my theme grid seems to be based on ‘flexbox’ I think rather than ‘CSS Grid’, the table of contents just overlaps.

[http://170.64.148.123/home-office-setup-guide/](http://170.64.148.123/home-office-setup-guide/)

Any advice on how to fix the CSS most welcome!!

---

<div class="post-metadata">

**Author:** ![ROY](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/roy/32/36059_2.png) [@ROY](https://forum.ghost.org/u/ROY)\
**Post date:** [June 22, 2023, 5:14am UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/10 "2023-06-22T05:14:57Z")

</div>

Hey @contentjungle

Can you please share what Ghost (Pro) plan and Theme are you on/using?

I’m on the Starter Ghost (Pro) plan which does not allow editing the theme in any way. I have looked at a few options including ([How to add a table of contents to your Ghost site](https://ghost.org/tutorials/adding-table-of-contents/), [How to setup the table of contents in ghost.org](https://www.hezhengda.io/how-to-setup-the-table-of-contents-in-ghost-org/), and a few others that I found in online searches), but I have not been able to find a solution.

The errors I have run into include ToC showing up on top of content, ToC overlapping on top of Header and/or Footer (see [here](https://drive.google.com/file/d/1TTle1qdmKFhGYqUUY0kiA5Tl5jmQcuB1/view)), or ToC not showing up at all.

I would love to have the ToC show up as sticky on the left side of the post. Feel free to let me know if you find another workaround 🙂

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [June 22, 2023, 1:49pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/11 "2023-06-22T13:49:02Z")

</div>

In your theme, are you able to put the TOC container after the div with the class `.oc-sidebar`?

---

<div class="post-metadata">

**Author:** ![Darren\_Sherwood](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/darren_sherwood/32/10015_2.png) [@Darren\_Sherwood](https://forum.ghost.org/u/Darren_Sherwood)\
**Post date:** [June 23, 2023, 9:12am UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/12 "2023-06-23T09:12:03Z")

</div>

Hi, @RyanF thanks so much for replying, yes I’ll have no problem moving some HTML around in the theme, I just have no idea about modern CSS, I only did a bit of CSS many years ago.

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [June 23, 2023, 1:09pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/13 "2023-06-23T13:09:22Z")

</div>

I’d move it and then share the updated link. Moving it should get you 90% of the way there.

---

<div class="post-metadata">

**Author:** ![Darren\_Sherwood](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/darren_sherwood/32/10015_2.png) [@Darren\_Sherwood](https://forum.ghost.org/u/Darren_Sherwood)\
**Post date:** [June 23, 2023, 10:37pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/14 "2023-06-23T22:37:36Z")

</div>

Actually, I’m a bit confused now - as there is not any div with a class of oc-sidebar.

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [June 23, 2023, 10:44pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/15 "2023-06-23T22:44:59Z")

</div>

Sorry, added a letter. You’re looking for `c-sidebar`

---

<div class="post-metadata">

**Author:** ![Darren\_Sherwood](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/darren_sherwood/32/10015_2.png) [@Darren\_Sherwood](https://forum.ghost.org/u/Darren_Sherwood)\
**Post date:** [June 24, 2023, 5:19am UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/16 "2023-06-24T05:19:20Z")

</div>

Thanks, so after doing that it appears at the top right of the screen:

[http://170.64.148.123/home-office-setup-guide/](http://170.64.148.123/home-office-setup-guide/)

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 24, 2023, 8:55am UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/17 "2023-06-24T08:55:31Z")

</div>

@Darren_Sherwood try putting the aside.gh-sidebar inside the div.c-sidebar

**What I see currently…**

 ![Screenshot 2023-06-24 024856](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/f/4/f44daf5c72817d9e02b42e1cc4d6d0ad438509a9.png)

**Try this…**

 ![Screenshot 2023-06-24 025138](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/5/9/595aa2316c14ffd390606301b6cf79c502435af2.png)

**Also, this in the CSS…**

```auto
.c-sidebar {
    position: absolute;
}

aside.gh-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: 4vmin;
}

.gh-toc
    position: sticky;
    top: 4vmin;
}

```

---

<div class="post-metadata">

**Author:** ![Darren\_Sherwood](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/darren_sherwood/32/10015_2.png) [@Darren\_Sherwood](https://forum.ghost.org/u/Darren_Sherwood)\
**Post date:** [June 24, 2023, 9:32am UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/18 "2023-06-24T09:32:06Z")

</div>

> [@denvergeeks](#):
>
> `position: absolute;`

Thanks very much for the idea @denvergeeks, I did try that already by drag-drop in Chrome tools, but I did not try the additional:

```auto
.c-sidebar {
    position: absolute;
}

```

…that you suggested (the other CSS is there already as per Ryan’s guide), but I tried that now and it makes everything else in the sidebar bleed to the right.

Happy to wait until next week for further suggestions from @RyanF (or others), have a great weekend. 🙂

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [June 24, 2023, 7:23pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/19 "2023-06-24T19:23:16Z")

</div>

Here’s what I’d go for (still needs fine tuning):

 ![CleanShot 2023-06-24 at 15.17.35](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/4/d/4d12044915f48aa7f448e3a7e99ab2e732cfd3ab.jpeg)

Put the .gh-sidebar element after the c-widget-author element.

![CleanShot 2023-06-24 at 15.19.33](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/3/2/3229987e9f429e0da8d394aa9e3e7d3dd3f345c0.png)

Remove all styling from `gh-sidebar`.

Add `padding-left: 32px;` to the `.toc-list` class.

Finally, if you want the sidebar to stick to the top of the page on scroll, add:

`position: sticky; top: 0;`

to `.c-sidebar`.

 ![CleanShot 2023-06-24 at 15.22.58](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/c/f/cfae048a1a4a3a7f9d132986e6c3357e318d1880.jpeg)

---

<div class="post-metadata">

**Author:** ![block](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@block](https://forum.ghost.org/u/block)\
**Post date:** [June 25, 2023, 2:23pm UTC](https://forum.ghost.org/t/adding-a-table-of-contents/29588/20 "2023-06-25T14:23:33Z")

</div>

I find it quite surprising that the development team is recommending the Table of Contents for the tutorial without thoroughly testing its impact on mobile devices. The excessive Content Layout Shifts (CLS) it causes could have been avoided with the guidance of an SEO specialist.

[https://forum.ghost.org/t/casper-cumulative-layout-shift-cls-on-google-pagespeed-insights-is-0-10/39316/4](https://forum.ghost.org/t/casper-cumulative-layout-shift-cls-on-google-pagespeed-insights-is-0-10/39316/4)

[Next page](https://forum.ghost.org/t/adding-a-table-of-contents/29588.md?page=2)