[Resolved] Open Off Canvas Panel using icon or button link

[Peter]

Hello,

This may have been answered but I did not find it.
I’m creating a mobile “app-like” menu that sticks to the bottom of the mobile page.
I want to add an icon that when tapped/clicked it opens the Off Canvas Panel.
So, rather than the automated hamburger menu opening the off canvas panel, I want an icon that I can place in my container / grid.

Possible? Or other options?
I am use GP Premium & GB Pro.

Thank you.

[Leo]

Hi Peter,

Adding menu-toggle custom class to any elements should trigger the off-canvas panel.

Let me know if this helps 🙂

[Zach]

@Leo, when I add menu-toggle custom class to my icon, it hides the icon. I am assuming this has something to do with GP customizer settings. I am using an Elementor header but want to trigger the GP slideout with a custom icon. How can I trigger the off canvas slideout with my custom icon, without actually using the GP header?

[Ying]

Hi Zach,

Do you have a link set to the icon?

If not, use #as the icon’s link.

If it doesn’t work, can you link us to your site and point us to the custom icon?

[Zach]

Adding a link doesn’t work.

Here is the site: https://amicilaser.flywheelsites.com/

un: flywheel
pw: steady-query

The icon should be in the right of the mobile header under the book appointment button.

[Ying]

I’m not seeing the icon:
https://www.screencast.com/t/Mz0JkkhEwc

Am I missing anything?

[Zach]

Indeed, that is my issue 😉

[Ying]

Let me know when the icon shows, so I can inspect the element 🙂

[Zach]

The element is there, just not visible. For some reason, adding the mobile-toggle class hides the icon. You’ll just have to inspect the empty space there.

[Ying]

This method will only work when the button is added within GP’s navigation, since you are using elementor to build the header area, it is hidden and the script won’t run.

Unfortunately, I do not see a way to call the slideout navigation in your case.

[Zach]

Ah ok. Makes sense. Thanks for your help!!

[Ying]

No problem 🙂

[Author]

Posts