Is there a way to make the ToC overlap galleries?

[dreamburger]

Hi,
I followed the official tutorial to add a Table of Contents to my articles.

It works okay with stand-alone images that are larger than the main content.
Unfortunately, it gets completely hidden by gallery-type images. Is there a way to correct this?

Alternatively, is it possible to locate the ToC further away to take into account wide images?

Thanks for your help.

[RyanF]

It’s possible to adjust the CSS (like the z-index) so that the TOC is above other content. But it’ll be difficult to offer any code without a live link. Are you able to share a link to your site? I’m also curious because those images look cool!

[dreamburger]

Yes, of course! Thanks for your help. Here’s the link: https://cyberdrifter.studio

[dreamburger]

Adjusting the CSS with z-index solved the issue of the galleries hiding the ToC on scroll:

    .gh-toc {
        position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
        top: 4vmin;
        z-index: 1;
    }

Now I’m wondering if there’s a way to push it more to the left so that there’s no overlap at all between wide images and the ToC. I’m assuming doing this could create some responsiveness issues?

[RyanF]

The CSS from our TOC tutorial should get you most of the way there:

How to add a table of contents to your Ghost site

.gh-content {
    position: relative;
 }

.gh-toc > .toc-list {
    position: relative;
}

.toc-list {
    overflow: hidden;
    list-style: none;
}

@media (min-width: 1300px) {
     .gh-sidebar {
        position: absolute; 
        top: 0;
        bottom: 0;
        margin-top: 4vmin;
        grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
    }
   
    .gh-toc {
        position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
        top: 4vmin;
    }
}

.gh-toc .is-active-link::before {
    background-color: var(--ghost-accent-color); /* Defines TOC   accent color based on Accent color set in Ghost Admin */
} 

[dreamburger]

I’m confused. Are we not seeing the same thing?

I’ve checked on two different browsers and this is what I’m getting:

[RyanF]

Here’s what it looks like for me on a large viewport:

[dreamburger]

That’s odd. I’ve checked on another computer and asked someone to check for me as well.

You’re the only one seeing it broken with numbering and dots.

Not sure why is that.

[RyanF]

Weird! Are you on a Windows or Mac machine?

[dreamburger]

I’ve tried on both with Chrome, Safari and Firefox! My friend who checked for me was using Windows.

[dreamburger]

Quick follow-up on this. As pointed out by Ryan above, the z-index solution works.

However, it doesn’t solve the fact the ToC has to go above or behind wide content.

I find it very distracting during reading.

Is there a way to offset the ToC completely so it doesn’t overlap 1200px wide images?

As it is, it looks like this when pictures are set in wide mode:

And here’s what I’m trying to do:

For the record, I’m using the Casper theme and the ToC is the same as the one from the official tutorial.

Thanks.

[Reseal4115]

I use padding-left: 20px; in

        .gh-sidebar {
            padding-left: 20px;
        }

to push my ToC a bit further to the right but my ToC is on the right side. Maybe padding can be a parameter to play with? Not sure.

[dreamburger]

Thanks for this. It works but it’s limited to the size of the actual content.

How did you move the ToC to the right side?

[Reseal4115]

I have something like:

    @media (min-width: 1300px) {
        .gh-sidebar {
            position: absolute; 
            top: 0;
            bottom: 0;
            margin-top: 4vmin;
            grid-column: main-end / full-end; /* Place the TOC to the right of the content */
            padding-left: 20px;
        }
        .gh-toc {
            position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
            top: 4vmin;
        }
    }