How to Add a Floating Table of contents to the sidebar?

[Narfinsel]

How to Add a Floating Table of contents to the sidebar?

I have a really really big post. It is enormous, and I want the user to have constant access to a table of contents on the sidebar (left sidebar) only for this particular post.
The X Theme TOC widget has two problems:

1. It does not stick to the view. As I scroll down, it disappears.
2. I really don’t like the text editing of the table. (text too big and too large of a line spacing)

Here is what I am looking for:
https://connections-pro.com/documentation/circled/

Easy Table of Contents

[rad]

Hi Svetozar,

Thanks for reaching out.

The X’s TOC element is a simple one, but what you’re trying to achieve is not. The floating sidebar is easy, you could just add this CSS to Theme Options > CSS

.x-sidebar {
position: fixed;
}

But this isn’t the final solution especially with the layout having headers, styling, substructures then it’s going to be complex. It would be a mix of javascript and CSS. For that, I recommend contacting a developer for proper implementation.

Thanks for understanding.

[Narfinsel]

Excellent!

How to do make this apply only to one single post?

And how can I make a custom table of contents? Or at least edit the ones that cornerstone has in widgets?

[rad]

Hi Svetozar,

You can change that to this

.single-post .x-sidebar {
position: fixed;
}

And it will be applied to blog post only.

As for custom table of contents, I’m afraid you still have to contact a developer as it will be more complex than using a ready-to-use plugin.

Thanks!

[Narfinsel]

Ok. how to can I put the Easy Table of Contents into the sidebar?

Easy Table of Contents

Then I can put it on FIXED.

[thai]

Hi There,

You can add the text widget to the main sidebar then insert the shortcodes to the text widget:

Hope it helps

[Narfinsel]

I used your recomandaiton in X Theme CSS:
.single.postid-419 .x-sidebar {
position: fixed;
}
Truly appreciate the help. One last thing : How can I make it not overlap the body? A way to make it consistent acroos all browsers…

[rad]

Hi @Narfinsel,

Please try adding a width to your CSS, example,

.single.postid-419 .x-sidebar {
position: fixed;
width: 30%;
}

Thanks!