Off Canvas Toggle Animation with Elementor

We took the Animated Toggle Code and applied it to Elementor's Off-Canvas Toggle Icon :)

[arnavdas]

Just wanted to say you're among the few reliable youtube people i can click on without thinking twice. If im looking for something and i see your video in the search results, i just know it'll be answered. I think its because you tick the three boxes -

1. Get straight to the point
2. No clickbaity title
3. You explain the best practices and WHY it is necessary.

Keep up the good work mate...!

[gabrielk]

Since the last video related to the effect on Wordpress Menu I was waiting for this one ❤

Thanks a lot!!

[nickbennink]

Wow I suggested this 2 days ago and you’ve already made it. Thank you very much Imran! 👏🏻

[DeoptochtSchaijk]

Huge thanks! You have the best channel for Elementor with the best content. Always up to date and very well explained. Keep up the good work Imran!

[emmanuelivwighre]

Bro you have the most amazing content in the internet as regard Elementor. Your dedication to new content and feedback is second to none. Much love from Nigeria.❤

[douglascapron]

A masterclass example of how to produce a tutorial. Another superb video. 500K subs within 18 months I predict, cheers!

[evanhodson]

Brilliant! Amazing work buddy. Thank you for sharing this.

[massimocesiro]

Very nice! Congratulations! It would be great if you could add a hover effect to the icon. Thanks, you're a legend

[photography_tv]

Can someone help me with a problem. I have the standart bars icon and then have the HTMl element. Everything works but the standart bar icons also is visible and overlapping with the animated hamburger icon. How can I make that bars icon invisible?

[phkoon]

Hello there, Imran!
Can you confirm it works with sticky headers?

I've tried it inside a sticky header and there seems to be an invisible element covering the icon itself.

It does toggle the off-canvas widget, but the icon itself isn't hoverable nor the animation happens on click, unless I scroll the page a little bit so said element remains away from the top of the icon.


When inspecting with the developer tools, in the css sheet the "position: relative" (in all of the elements) is crossed and the "z-index: 9500" is marked with the information dot saying that the "position: static" prevents the z-index to take effect.

Later, I'll look into it a bit more, but if you can confirm or deny it, it'd be really helpful.

Anyways, thanks in advance!

[RenatoMura]

Ottimo sistema per aprire off-canvas, ma il codice html non consente la visualizzazione delle altre icone all'interno della pagina di elementor... che fare???

[michaelgregory]

I love what you do Imran, always inspired by your videos and I have followed previous videos and put my little spin on things on my playground website lol which love to share what I done. However I been having issues with this toggle animation and may be experiencing some similar problems someone else mentioned in your comments. So I got a sticky header and the animation of the toggle doesn't work (showing the cross) once clicked but the off canvas slides out. but the cross does work if you scroll down the page. I also noticed that the toggle animation isnt fully responsive as you have to click it twice to animate the hamburger to the cross and back but then its not syncing to the off canvas meaning every one click the off canvas slides in or out but two clicks for the button to do its animation. Hope there is a solution for this. Am curious if anyone else is experiencing the similar things. Thanks again You are amazing at what you do and great to watch! 😄👍

[Chlialls-tgzx]

"Great video! Thanks for the helpful tutorial. However, I'm having an issue where all the icons on my website disappear after following the steps. Any idea why this might be happening?"