How to Open Off-Canvas Content Using Elementor Menu Widget

Elementor Mobile Menu widget is a new powerful Elementor widget that has been added in Premium Addons for Elementor plugin v4.10.32. It helps you to create a mobile navigation menu, add icon, image, Lottie animation or SVG draw to each menu item. Not just that, you can set the click action for each menu item to open a link or an off-canvas menu. This can be used if you want to open a sidebar or WooCommerce cart after your navbar menu item is clicked.

In this tutorial, we will show to to use Premium Mobile Menu widget and Off-Canvas widgets to create an off-canvas menu that is triggered by a menu item.

Requirements:

  • You will need Premium Addons Pro plugin installed and activated on your website.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.
  • Make sure the two widgets are enabled so you can find it in the Elementor editor. To enable it navigate to WP Dashboard -> Premium Addons for Elementor tab -> Widgets & Add-ons -> Switch on the Mobile Menu and Off Canvas widgets.

1. Add Elementor Off-Canvas Widget

Start by adding Elementor Off-Canvas widget to your page and select the Elementor template you want to show.

  1. From widget settings -> Content tab -> Trigger, set the Trigger select option to “CSS Selector”.
  2. Give an ID to the current Off-Canvas using CSS Selector text field. For example “#myoff-canvas”. Note that you need to add a hash “#” before the ID.
Assign a CSS ID to Elementor off-canvas menu

2. Add Elementor Mobile Navigation Menu Widget

Once you finish building the off-canvas widget, you need to add Elementor Mobile Menu widget by drag and drop it to the preview area on your editor page.

  1. From widget settings -> Content tab -> Menu Items, add a new menu item or select the menu item you want.
  2. Set the Action select option to “Open Off-Canvas”.
  3. Add the same ID added in Off-Canvas -> CSS Selector text field, but without the hash “#”
Set an ID to Elementor Mobile Menu widget item
Note: Trigger Elementor Off-Canvas using Mobile Navigation Menu item works on the frontend only.

That’s It!

You can now use the mobile navigation menu items to open any Elementor content you want with just few clicks.

If you still need any further assistance, feel free to contact the Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.

Related Docs:

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.