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

Home Forums Support [Resolved] How to display Easy TOC before the first H2 only on mobile?

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

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #1460745
    Andrei

    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 widget

    On 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!

    #1460849
    David
    Staff
    Customer Support

    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.

    #1461985
    Andrei

    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 πŸ™‚

    #1462139
    David
    Staff
    Customer Support

    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.

    #1462171
    Andrei

    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 πŸ™‚

    #1462195
    David
    Staff
    Customer Support

    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

    #1466059
    Andrei

    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

    #1466268
    David
    Staff
    Customer Support

    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

    #1466672
    Andrei

    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/

    #1467032
    David
    Staff
    Customer Support

    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?

    #1470198
    Andrei

    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

    #1470401
    David
    Staff
    Customer Support

    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.

    #1470678
    Andrei

    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!

    #1470940
    David
    Staff
    Customer Support

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

    Have a great weekend too!

    #1500778
    Andrei

    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 πŸ˜€
    I don’t believe with these actions you can fix the TOC placement on mobile before the first H2 only.

Viewing 15 posts - 1 through 15 (of 28 total)
  • You must be logged in to reply to this topic.