✅ 🔗 🚀 Feature Request: Off Canvas Widget (Merged with #21769) - [ED-13937]

[terryhauptza]

Prerequisites

• [ x] I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• [ x] The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

What problem is your feature request going to solve? Please describe.
An Off Canvas widget will allow for an off canvas section (with any content inside) that is revealed from any direction. Would be great for building more customized mobile menus. (Menu Cart widget currently does this)

Describe the solution you'd like
A new Off Canvas Pro widget to create slide-in menus/custom content boxes and can display any saved widgets/templates/sections. Off Canvas can be triggered by link, button, image, icon etc..
Off Canvas can be revealed with animations such as slide, reveal, push, slide along, fade etc and from any direction.

Describe alternatives you've considered
Essentially the reason for this is to build a better mobile experience where instead of drop down menus you can choose to have it slide from either left or right. Also the ability to change the default hamburger icon to a "user icon" for instance if the menu is member/user specific. These menus could then also be better structured with any content (saved widgets/sections/templates).

[artconic]

This will be the BIGGEST move for Elementor. It will be the number one seller, and different from all competitors.

[jcmatoskx]

I achieved this with the Elementor PopUps, however they dont move the content of the website as mentioned. Maybe there is some CSS that could be inserted on the Popup that would move the website gutter/width?
I tried adding a margin with CSS to a few elementor row classes and it works except that it also affects the content on the popup as well.

[black-eye]

+1
It would be very usefull if this feature could use the same contions and trigger system as the popups.

[philmatt]

+1

[desidm]

Yes please +1. I have to add an extra elementor add-on plugin every time I build a site just to get a decent mobile menu.

[Aryehhirsc]

I wish they would implement this already

[ahmedzeidan]

I can see this working on Elementor's main website when they are announcing Black Friday sale in a popup (content is being pushed down)... However, no idea what custom code they are using to achieve this... I would appreciate if the Elementor team would take a look at this and release such a feature...

[Fjashaw]

Yessssss please!!

[raabmar]

Anyone found a nice workaround for this?

Basically something like this: if popup is shown, add top margin of first section and transition it. If popup is closed, delete top margin.

[rossclurman]

+1

Would love some CSS guidance and/or an Elementor fix!

This may help anyone willing to try a PHP workaround:
https://www.reddit.com/r/elementor/comments/qxs79s/comment/hlbn7g9/?utm_source=share&utm_medium=web2x&context=3

[tamal-sen]

+1 Now I need to install a whole new plugin just to achieve this.

[csarigoz]

+1 I think this should have been solved until now.

[ayoubkhan558]

This featured is shippped, still issue is open?

[nicholaszein]

Hi everyone!

We have great news! 🙌

📢 We're happy to announce that this feature was released with Elementor Pro v3.22.0! 🥳

✅ Feel free to check it out and update your plugin to the new version!

Check the changelog for more information:
Changelog of Elementor and Elementor Pro

Cheers 🥂