- This topic has 27 replies, 2 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
September 27, 2020 at 3:37 am #1460745Andrei
Hello folks,
Did lots of checks but I don’t seem to sort this out on mobile.
I did the following:
1. For singlePost I have as layout: Content + Right sidebar
2. On the right sidebar I’ve added the Easy TOC as widgetOn desktop it looks exactly as I wanted, but on mobile the TOC is actually at the end of the content. From Appearance -> Customize, I tried changing the singlePost layout to Sidebar / Content, but still nothing. I see the TOC at the end of the content on mobile.
Is there any CSS trick to tell “ez-toc” do show up only on mobile before the first H2 in the content?
Here is a link to a blog post where I’m testing this so you can have a better look: https://krave.ro/103-2/
Hope you can help me out.Cheers and a lovely Sunday!
September 27, 2020 at 5:33 am #1460849DavidStaffCustomer SupportHi 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.
September 28, 2020 at 4:01 am #1461985AndreiHi 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 π
September 28, 2020 at 6:28 am #1462139DavidStaffCustomer SupportI 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.
September 28, 2020 at 6:55 am #1462171AndreiHi 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 πSeptember 28, 2020 at 7:08 am #1462195DavidStaffCustomer SupportIs 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
September 30, 2020 at 2:05 pm #1466059AndreiHi 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
September 30, 2020 at 5:51 pm #1466268DavidStaffCustomer SupportThe 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
October 1, 2020 at 1:39 am #1466672AndreiHello 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 assignedtoc-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/October 1, 2020 at 5:51 am #1467032DavidStaffCustomer SupportDamnit 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?
October 3, 2020 at 3:11 am #1470198AndreiHee 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
October 3, 2020 at 6:21 am #1470401DavidStaffCustomer SupportThats 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.
October 3, 2020 at 8:51 am #1470678AndreiTried 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/119Cheers & great weekend David!
October 3, 2020 at 2:18 pm #1470940DavidStaffCustomer SupportNO problems – git issue looks good to me – if they want us to chime in then let us know.
Have a great weekend too!
October 22, 2020 at 11:59 pm #1500778AndreiHi 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 π
I don’t believe with these actions you can fix the TOC placement on mobile before the first H2 only. -
AuthorPosts
- You must be logged in to reply to this topic.