[Resolved] How To Add A Floating Table Of Contents in Sidebar?

[Ravi Dixit]

I want to add a floating TOC at sidebar…

When I added it using Easy Table Of Contents by adding it in widgets…

But it is changing single post container alignment, See here https://prnt.sc/phkkp8

I don’t want to move my single post container to left. Instead, I want to add TOC without moving my post container, see here https://prnt.sc/phknqy

I tried by using Right Sidebar Width from in-built option but it is not looking as I am expecting… It should be like https://prnt.sc/phkpyl

Thanks,
Ravi Dixit

[Leo]

Hi there,

Can you add it using the right sidebar and link me to the post in question?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

Okay,

I have added TOC on the right sidebar.

Click here for the post.

[Leo]

Try this CSS:

.single .site.grid-container {
    margin-right: 0;
}

You could increase the number if you want some space on the right of sidebar too.

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

It worked but not as I wanted…

See here https://prnt.sc/phlspt

I don’t want to move post container…

Instead, we can make the widget small…

[Leo]

I’m looking at the screenshot but not sure what I am missing.

So you want to make the sidebar smaller?

That can be done in the customzier:
https://docs.generatepress.com/article/sidebar-widths/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

Thanks, Leo!

It worked, I decrease the width using the in-built option.

Can you help me in this query, https://generatepress.com/forums/topic/how-to-last-updated-date-on-page-header/#post-1031433

[Leo]

No problem 🙂

We will get to the other topic. Thanks for your patience!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

Hey, Leo!

Something just popped up into my mind…

If we can decrease the space between Sidebar and Post containers then it might solve my issue. I am talking about this highlighted space: https://prnt.sc/phmbk5

And the TOC links are not showing fully just because of the sidebar, I have highlighted that too.

[Leo]

You could try this CSS to decrease the space between them:

.single .inside-article, .comments-area {
    margin-right: 20px;
}

It’s simply not possible to keep the container where it was, decrease the space between the content and sidebar while keeping the sidebar sticking to the right edge.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

Thanks, It worked as I was expecting…

[Leo]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ravi Dixit]

Hi, Leo…

That CSS is working on mobile also, see here https://prntscr.com/pi2msk

I want it only for desktop…

I have disabled the TOC from mobile.

Please help…

[Leo]

Just need to wrap the code in media query:

@media (min-width: 769px) {
    .single .inside-article, .comments-area {
        margin-right: 20px;
    }
}

Learn more here: https://docs.generatepress.com/article/responsive-display/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts