By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Question Elementor mobile Table of Contents Popup

D

Dorian

New Member
Hey Team,

I want to have a sticky mobile Table of Contents.
I built a popup with a TOC. That popup is triggered onclick.
The button and trigger works and the popup opens --> see images.



1605612917133.png
-->
1605612965551.png

Unfortunately the TOC doenst grab the Headlines of the page.
What am I doing wrong?
Please help a brother out :)


Thanks in advance.

Cheers
Dorian
 
elementor official
S

shaunm

New Member
Hi Dorian,

The the reason TOC element not picking up the H1 - H5 text (headlines) is that the popup has its own page id and the TOC widget is set to the page id for the page it is used on. In other words its looking for H1 - H5 on the pop-up, not the page you are using it on.

What I would do is just create a TOC from scratch using Anchor Link element. You can just add the links with the Text element and place Anchor Link elements to where you want the page to scroll to.

Just set the Class ID for each headline you want to link to and use that Class ID for each Anchor Link you place on the mobile page (just the text, without # - i.e. "headline-1"). For the links in the TOC you are making, use your full url with #class-id - example: yourwebsite.com/#anchor-class-id

Hope this helps!

Shaun
 
elementor official
D

Dorian

New Member
Hi Shaun,
you're the man! The only one who replied to me in all forums. Elementor support didnt reply either. Thanks!
Thanks for the note that its a different page.

Using your strategy would be possible, but I want to use it in my post-template. That means I would need to write the text seperately for every post right?
Because its not gonna be dynamic.

Am I getting this right?

Thanks in advance

Dorian
 
elementor official
S

shaunm

New Member
Hi Dorian,

No worries, happy to help. I'm sorry I didn't understand this was for a post template. I think the solution to what you want to do would involve using custom fields that would call the Headlines (H1-H5) from the post that the pop up would appear on. I haven't messed with custom fields, but this would be a fun project to see if I can get it to work. I'll try to mess with it tonight.

One work around I can think of is having the TOC fade in after scrolling down the page? You can then just use the TOC element in the post template, set the position to Fixed (to bottom left of viewport) and set a fade scrolling effect so the TOC would appear after scrolling down the page. Just be sure to set the Z-Index of the TOC element to 99 so it appears over the rest of the content on the page.

Cheers,

Shaun
 
elementor official
D

Dorian

New Member
Hi Shaun,

thanks.
I like your idea. That would be a nice work-around. But I want the user to be able to click the TOC at anytime. Makes the usability much nicer...
Elementor team still didnt reply...
meh.

Thanks tho.

Cheers

Dorian
 
elementor official

Latest posts

Other Elementor Resources

elementor official
elementor official
Top