---
title: "How to Create an Off Canvas Mobile Menu in Elementor?"
url: https://theplusaddons.com/docs/create-an-off-canvas-mobile-menu-in-elementor/
date: 2023-10-27
modified: 2026-04-10
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-an-Off-Canvas-Mobile-Menu-in-Elementor_-1024x536.jpg
word_count: 356
---

# How to Create an Off Canvas Mobile Menu in Elementor?

## 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.

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](/docs/navigation-menu-widget-settings-overview/).*

***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](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

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*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* 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.](https://theplusaddons.com/blog/best-mega-menu-examples/)

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](https://theplusaddons.com/docs/create-an-off-canvas-mobile-menu-in-elementor/).

Also, read [how to create a hamburger mobile menu with Elementor template](https://theplusaddons.com/docs//create-a-hamburger-mobile-menu-with-elementor-template/).

## Frequently Asked Questions

**Q: What should I do if the off canvas mobile menu isn't appearing?**
A: 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.

**Q: What is the best width setting for the off canvas menu?**
A: 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.

**Q: Does the off canvas mobile menu work on all devices?**
A: 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.

**Q: Are there any limitations when using the Navigation Menu widget?**
A: 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.