How to Create an Off Canvas Mobile Menu in Elementor?

Updated onApril 10, 2026By

Key Takeaways

  • The Plus Addons for Elementor includes a Navigation Menu widget that allows users to create an off canvas mobile menu.
  • Users can set the off canvas container width in the Custom Width section of the Navigation Menu widget.
  • The Navigation Menu widget offers two content type options: Normal Menu for a WordPress default menu and Template Menu for an Elementor template.
Table Of Content

Are you looking to add a modern off canvas mobile menu in Elementor? An off canvas menu allows for a more intuitive and compact navigation experience, as it slides in and out of the screen without taking up valuable space.

With the Navigation Menu widget from The Plus Addons for Elementor, you can easily add an off canvas menu for the mobile menu.

To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

LIVE WIDGET LINK

To do this, add the Navigation Menu widget to the header template and follow the steps –

Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.

1. From the Layout and Content tabs, select the appropriate Menu Type, Menu Direction and menu.

2. Then go to the Mobile Menu tab and enable the Responsive Mobile Menu toggle.

3. From the Menu Type dropdown, select Off Canvas.

From the Custom Width section, you can set the off canvas container width.

In the Open Mobile Menu section, you can specify the minimum width for enabling the mobile menu.

From the Navigation Alignment section, you can align the mobile menu items.

Must read, 8 best mega menu examples + learn how to create them.

4. Then, from the Menu Content dropdown, you can select the menu content type. Here, you’ll find two options – 

Normal Menu – To use a WordPress default menu as a mobile menu.

Template Menu – To use an Elementor template as a mobile menu.

Let’s select the Normal Menu here.

5. From the Select Menu dropdown, you have to select your menu.

Now you’ll see a beautiful off canvas menu when you click on the toggle button on mobile.

Also, learn how to create an off-canvas mobile menu in Elementor for a modern touch to your site’s navigation.

Also, read how to create a hamburger mobile menu with Elementor template.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the off canvas mobile menu isn't appearing?

If the off canvas mobile menu isn't showing, check if the Responsive Mobile Menu toggle is enabled in the Mobile Menu tab of the Navigation Menu widget settings. This toggle must be activated for the mobile menu to function properly. Additionally, ensure that you've selected 'Off Canvas' from the Menu Type dropdown and that your menu content is correctly set up.

What is the best width setting for the off canvas menu?

The Custom Width setting for the off canvas container allows you to define how much of the screen the menu will occupy when opened. A common practice is to set this width to around 80% of the screen size for a balanced look, ensuring that the menu is easily accessible without overwhelming the content behind it.

Does the off canvas mobile menu work on all devices?

The off canvas mobile menu is specifically designed for mobile devices. Ensure that the Open Mobile Menu section's minimum width is set appropriately to trigger the mobile menu on smaller screens. This feature enhances usability by providing a compact navigation option for mobile users.

Are there any limitations when using the Navigation Menu widget?

The Navigation Menu widget from The Plus Addons for Elementor is exclusively compatible with Elementor and does not work with other page builders like Gutenberg or Divi. This limitation means you must use Elementor to take full advantage of the widget's features, including the off canvas mobile menu functionality.

Last reviewed: April 10, 2026

Related Docs