How to display Easy TOC before the first H2 only on mobile?

Hi there,

to move it from the sidebar to within the post content would require Javascript - which can be problematic.

Alternative option would be to:

1. Remove the ToC from the sidebar and add it inside your content where you want it displayed for mobile.
2. Then add a HTML Widget with just a comment eg. <!-- Toc Placeholder --> so we can keep an empty Sidebar for the ToC to be moved to on Desktop.

Once thats done - let us know and ill see what i can do with some CSS. Can't promise anything but its worth a shot.

Hi David,

Thanks again for your prompt reply. Tried that and looking forward to your next precious instructions.

Saw exactly what I need on some other website, so I think it should be possible. Just too bad I'm not technical enough to do this myself.

Will wait for your reply :)

I am not seeing the TOC on the example page below the first H2 ? Can you add that in or link me to a page where i can see it.

Hi David,

Added some more steps in the private section below.
Seems I had forgotten one of the steps you mentioned, but that's fixed now and more details below :)

Is the ToC going to be Sticky?
If so can you add a Container Block, and place the ToC shortcode inside it.
Then select the Container Block and in Settings > Advanced --> Additional CSS - add:

toc-container

And remove all the padding from the Container Block

Hi David,

Sorry for my very late reply.
I've tried to do what you said but I kinda got completely lost :/

You asked "Is the ToC going to be Sticky?" Yes - for the desktop view I'd live the TOC sticky (as it is currently).

But for mobile view I'd like it at the top of the content, before the first H2, and not at the end after the comments section.

If we think about the singlePost layout as having 2 columns: column 1 for content and column 2 for the right sidebar with the TOC widget, I remember a setting in elementor: "Inverse columns on mobile".

That's exactly the kind of magic I'd need to my TOC is not shown anymore at the end of the content for mobile :)

Not sure we can sort this out though, but was worth asking you guys, since my technical lvl is not that great.

Cheers

The plan was to put the ToC within the content before the H2. This is how it will display for Mobile.
On Desktop i will provide some CSS that moves it out of the main content and positions it over the sidebar area.
If you want the ToC to be Sticky on desktop then i need the Shortcode to be placed inside a Container Block with a CSS class of: toc-container

Hello David,

Thanks again for getting back to me.

Re-checked your instructions and did this:
1. From the easy TOC settings, I enabled the TOC to be shown above first heading.
2. Went to Appearance -> Elements and created a new Block container, which I assigned toc-container CSS class, in the "Additional CSS classes" box from the Advanced section.

I'm seeing now correctly shown the TOC above first heading for both mobile & desktop.

Will wait for your CSS magic, to move the TOC from content to right-sidebar on desktop only.

Hope I didn't miss anything from your instructions.
Here's the page: https://krave.ro/103-2/

Damnit lol
So what i was hoping is we place the shortcode inside a container.
Which we cannot do if the ToC is being auto inserted.

Effectively i need this:

<div class="my-custom-container">
/* TOC in here */
</div>

I looked at the Plugins code and couldn't see any obvious hooks or filters to allow me to do that. Would you mind asking the plugin author if thats possible?

Hee David,

Spoke with the guys at easy TOC as well, they said they'll add this idea on the backlog, but can't promise when/if this'll be implemented.

But meanwhile, I thought about this more and would actually be awesome if in appearance-> customize-> layout, when we go to the singlePost content and select content + right sideBar, when we switch to mobile view, to have some kind of option that says: "Display sidebar + content after for mobile view".

Such an option would be the exact perfect solution for this situation that I have. Not sure though if more people would need this and if you guys are actually willing to implement it :)

Have a great weekend and speak to you!

Cheers

Thats a shame - i couldn't see any hooks to do it - be nice if they added a Hook Before/After the TOC container.....

If you want to place the Right Sidebar above the content for Mobile you just need this CSS:

@media(max-width: 768px) {
    .right-sidebar .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

But what it cannot do is move the sidebar inside the content without JS or adding a duplicate hidden sidebar within the content... which is not a nice solution.

Tried the CSS, and it is a potential workaround, although not the ideal situation, specially with a sticky TOC, but thanks of course for the suggestion, might try it out actually without the TOC sticky.

Meanwhile also put a github ticket for the guys working on the TOC there. Not sure how well I explained, but let's see if they're able to help out :)
https://github.com/shazahm1/Easy-Table-of-Contents/issues/119

Cheers & great weekend David!

NO problems - git issue looks good to me - if they want us to chime in then let us know.

Have a great weekend too!

Hi David,

Hope you're doing well :)

There's some update in the gitHub item:

There are the ez_toc_before_widget and ez_toc_after_widget actions available. Or is something else needed? If I can get more specifics that would help. Thanks!

You mentioned you can chime in the discussion there - as I'm not sure what to answer :D
I don't believe with these actions you can fix the TOC placement on mobile before the first H2 only.