[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 13 posts - 16 through 28 (of 28 total)
  • Author
    Posts
  • #1500956
    David
    Staff
    Customer Support

    I have replied.
    Hope that helps!

    #1501011
    Andrei

    Awesome and thanks! Let’s see if the guys are willing to implement that hook 😀

    #1501089
    David
    Staff
    Customer Support
    #1501222
    Andrei

    Think it’s better to move the talk here David isn’t it 😀

    Unless i am missing something the ez_toc_before comes after


    @andreiger
    we could probably work with this but it means the Title and Toggle won’t be sticky only the ToC List. Your call.

    I guess I understand what you mean. As long as the desktop view stays the same and we can actually disable the sidebar (including the TOC for mobile) and fetch the TOC in this manner just above the first H2 would be great 🙂

    Did I catch your idea properly?

    #1501423
    David
    Staff
    Customer Support

    Only one way to find out.
    Add this PHP Snippet to your site:

    add_action('ez_toc_before', function() {
      echo '<div class="custom-toc-wrapper">';
    });
    
    add_action('ez_toc_after', function() {
      echo '</div>';
    });

    https://docs.generatepress.com/article/adding-php/

    Then set your ToC where you need it in the plugin settings.
    First thing to check is if the ToC toggle still works.

    Let me know and i can take a look if its now possible.

    #1501440
    Andrei

    Made the mentioned changes – added the php snippet with the plugin mentioned in the guide.

    Desktop looks oke, the toggle is fine!
    But on mobile there are no changes actually:

    This is the page:
    https://krave.ro/103-2/

    #1501447
    David
    Staff
    Customer Support

    The ToC needs to be positioned in the Content using the plugin settings – not the sidebar.
    Then disable whatever your using to make the sidebar sticky.

    The ToC should appear in the sample place for Desktop and Mobile.

    I will then see if can reposition the ToC for desktop with CSS only.

    #1501461
    Andrei

    Correct!

    Removed it from the sidebar, also removed the css that was making it sticky.
    Now I see the TOC above first heading on both mobile & desktop.

    #1501524
    David
    Staff
    Customer Support

    Now try this CSS:

    @media(min-width: 1024px) {
        #content {
            position: relative;
        }
    
        div#ez-toc-container {
            position: absolute;
            top: 80px;
            right: 0;
            bottom: 0;
            max-width: 23%;
            margin-left: 2%;
            width: 100%;
            z-index: 1;
            display: flex;
            flex-direction: column;
            border: none;
        }
    
        .custom-toc-wrapper,
        .ez-toc-title-container {
            position: -webkit-sticky;
            position: sticky;
            top: 90px;
        }
    
        .ez-toc-title-container {
            margin-bottom: 20px;
            top: 40px;
        }
    }
    #1501537
    Andrei

    My goodness! absolutely stunning David!! 😀

    On thing though, on desktop, the TOC was cutting through the footer, so I removed that
    “height: 100%;” – Probably it has a purpose, but without it, it’s all good, doesn’t cut anymore through the footer.

    This is all for my test-site, so will implement straight away on the others too 😀

    Thanks a billion! I hope to make it to Vancouver one day, cause I owe you guys so many beers!

    Cheers and a splendid weekend!

    #1501542
    David
    Staff
    Customer Support

    I actually edited the above CSS to remove the height value as it wasn’t necessary – you must have been real quick grabbing that CSS lol.

    Awesome – glad to hear it works!

    #1501572
    Andrei

    Indeed starting to get a better CSS grasp. It’s nice actually, although I’m just doing basic stuff.

    Will get back to work now! thanks so much again 🤘🏻
    Will mark this as resolved now.

    #1502181
    David
    Staff
    Customer Support
Viewing 13 posts - 16 through 28 (of 28 total)
  • You must be logged in to reply to this topic.