--- 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-09-04 lang: en author: "Aditya Sharma" description: "Are you looking to add an off canvas mobile menu in Elementor? An off canvas menu slides in from the side of the screen when triggered, keeping your navigation compact..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-an-Off-Canvas-Mobile-Menu-in-Elementor_-1024x536.jpg word_count: 1263 --- # How to Create an Off Canvas Mobile Menu in Elementor? ## - The Navigation Menu widget in The Plus Addons for Elementor includes a Mobile Menu tab with a dedicated Off Canvas menu type that slides in as a full panel from the side of the screen. - The Plus Addons for Elementor Pro includes the Off Canvas mobile menu, while the free Navigation Menu Lite widget does not include this Mobile Menu type. - Custom Width, Open Mobile Menu breakpoint, Navigation Alignment, and Menu Content give control over the off canvas panel, including a choice between Normal Menu and Template Menu. - Ticket #16711, Ticket #14288, and Ticket #9180 point to three troubleshooting checks: clear caches after updates, confirm the Select Menu has items assigned, and check that no parent container in the header template has a fixed height or overflow rule. Are you looking to add an off canvas mobile menu in Elementor? An off canvas menu slides in from the side of the screen when triggered, keeping your navigation compact and out of the way on smaller devices without reducing the available screen space for content. Table Of Contents ## What It Does The Navigation Menu widget in The Plus Addons for Elementor includes a Mobile Menu tab with a dedicated Off Canvas menu type. Instead of the mobile navigation dropping down inline under the header, an off canvas menu slides in as a full panel from the side of the screen, so it can hold a wider, deeper menu without pushing page content down. ***Requirement – This is a Pro widget.*** The Navigation Menu widget (with its Mobile Menu / Off Canvas controls) is part of [The Plus Addons for Elementor Pro](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text); the free Navigation Menu Lite widget does not include an Off Canvas mobile menu type. *To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).* ## Why It Matters Inline dropdown mobile menus run out of room fast once a site has more than a handful of links, and they push the rest of the page down every time they open. An off canvas panel keeps the trigger button small while giving the menu itself a full-height side panel to work with, so multi-level navigation, icons, or a search field can all fit without compromising the mobile layout underneath. ## What You Get - An **Off Canvas** option in the Mobile Menu tab's Menu Type dropdown - A **Custom Width** slider to size the sliding panel - An **Open Mobile Menu** breakpoint slider that decides at which screen width the mobile (off canvas) menu takes over from the desktop menu - **Navigation Alignment** and a **Menu Content** choice between a normal WordPress menu or a full Elementor template ## Benefits - **More room for navigation** – a side panel fits longer menus than an inline dropdown - **No layout shift** – opening the menu doesn't push page content down - **Design flexibility** – the Template Menu option lets the panel use a fully custom Elementor layout instead of a plain link list ## Capabilities The Mobile Menu tab's Responsive Mobile Menu toggle separates mobile navigation behavior entirely from the desktop Menu Type/Menu Direction settings. Once Off Canvas is selected, Custom Width, Open Mobile Menu (breakpoint), and Navigation Alignment become available, and Menu Content lets the panel pull from either a standard WordPress menu (Normal Menu) or a saved Elementor template (Template Menu). ## How It Works Below the Open Mobile Menu breakpoint, the widget swaps the desktop navigation for a toggle/hamburger trigger. Tapping it slides the Off Canvas panel in from the side at the width set by Custom Width. If Menu Content is set to Template Menu, the panel renders the chosen Elementor template instead of a plain WordPress menu list, so it can include images, buttons, or any other widget. ## How to Use It [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. In the **Layout** and **Content** tabs, select the appropriate **Menu Type**, **Menu Direction**, and menu. These settings control the desktop navigation layout and determine which WordPress menu is used as the source. 2. Go to the **Mobile Menu** tab and enable the **Responsive Mobile Menu** toggle. This activates the mobile-specific menu settings and separates mobile navigation behavior from the desktop layout. 3. From the **Menu Type** dropdown, select **Off Canvas**. This sets the mobile menu to slide in as an off canvas panel when the visitor taps the menu trigger button. From the **Custom Width** section, set the width of the off canvas panel. Use a narrower value (240px to 300px) for a minimal mobile menu, or a wider value for menus with icons or multi-column content. In the **Open Mobile Menu** section, specify the minimum viewport width at which the mobile menu activates. Visitors on screens wider than this value will see the desktop navigation instead. From the **Navigation Alignment** section, control the alignment of the off canvas menu items. Left alignment is standard for most designs, while centered alignment works well on minimal single-column mobile menus. ***Also Read:*** [how to create an off canvas popup menu in Elementor](https://theplusaddons.com/docs/off-canvas-popup-menu-in-elementor/) for a slide-over panel triggered by a button click rather than a viewport breakpoint. 4. From the **Menu Content** dropdown, select the menu content type. There are two options – **Normal Menu** – To use a WordPress default menu as the mobile menu content. **Template Menu** – To use an Elementor template as the mobile menu content. Use this when your mobile menu needs custom layouts, images, or styled elements that go beyond a standard list. For this walkthrough, select **Normal Menu**. 5. From the **Select Menu** dropdown, select the WordPress menu you want to use as the mobile navigation. ***Also Read:*** [how to create a side menu in Elementor](https://theplusaddons.com/docs/create-a-side-menu-in-elementor/) for a permanently visible sidebar navigation instead of a toggled panel. Setting Menu Type to Off Canvas in the Mobile Menu tab When you click the toggle button on mobile, the off canvas menu slides into view from the side of the screen. Off canvas mobile menu sliding in on tap ## Use Cases - Mobile-first websites where header navigation space is limited and a slide-out menu improves the user experience - Multi-page business sites where the primary navigation has five or more links that cannot fit in a compact mobile header - Portfolio and agency sites that use the header area for branding and need navigation tucked into an off canvas panel ## Limitations - Off Canvas is a Mobile Menu type on the Pro Navigation Menu widget; it is not available on the free Navigation Menu Lite widget. - The Open Mobile Menu breakpoint is a single global value; you cannot set a different breakpoint for tablet vs. phone. - If the site has both an off canvas mobile menu and an off canvas popup menu (triggered by a button), make sure the two don't share the same trigger element or they can conflict. ## Troubleshooting - **Off canvas menu shows a grey screen instead of the menu, or stops working entirely.** Ticket #16711 ("Off Canvas Mobile Menu stopped working") – reported on a live site where tapping the hamburger icon just showed a grey overlay. This is usually a caching or plugin-update conflict; clear all site/CDN caches after any Elementor or theme update and re-test in an incognito window. - **Off canvas menu items don't appear, or the panel stays open after tapping outside it.** Ticket #14288 ("Bug found as well, off canvas mobile menu does not render") – on iPhone Safari/Chrome, menu items sometimes failed to render or the panel would not close on an outside tap. Confirm the **Select Menu** dropdown points to a WordPress menu that actually has items assigned, and test on an updated mobile browser since older WebKit versions can behave differently with off canvas transitions. - **Off canvas panel doesn't reach full viewport height.** Ticket #9180 ("Off canvas mobile menu") – a customer set a 100 height value but the panel still wasn't full height in a Global Header template. Check that no parent container in the header template has a fixed height or overflow rule that clips the off canvas panel. ## Suggested Reading - [How to create an off canvas popup menu in Elementor](https://theplusaddons.com/docs/off-canvas-popup-menu-in-elementor/) - [How to create a side menu in Elementor](https://theplusaddons.com/docs/create-a-side-menu-in-elementor/) - [Navigation Menu Widget Settings Overview](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/)