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

[David]

I have replied.
Hope that helps!

[Andrei]

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

[David]

Lets 🙂

[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?

[David]

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.

[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/

[David]

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.

[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.

[David]

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;
    }
}

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

[David]

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!

[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.

[David]

You’re welcome

[Author]

Posts