--- 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-11 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 edge of the screen when visitors tap the menu button,..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-an-Off-Canvas-Mobile-Menu-in-Elementor_-1024x536.jpg word_count: 552 --- # How to Create an Off Canvas Mobile Menu in Elementor? ## - The Plus Addons for Elementor Navigation Menu widget offers Off Canvas as one of three mobile menu types, and the Pro version is required because Navigation Menu Lite does not include this option. - Off Canvas mobile menus use Content > Mobile Menu settings such as Responsive Mobile Menu, Menu Type set to Off Canvas, Custom Width up to 750px, and Open Mobile Menu at the default 991px breakpoint. - The off canvas panel slides in from the left edge, closes with the “×” at the top right, and submenu items open their submenu instead of following the parent link. Are you looking to add an off canvas mobile menu in Elementor? An off canvas menu slides in from the edge of the screen when visitors tap the menu button, and covers the page instead of pushing it down. With the Navigation Menu widget from The Plus Addons for Elementor, it is one of three mobile menu types. *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/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's 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) Table Of Contents ## Before You Start - **Edition:** **Pro** — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free **Navigation Menu Lite** widget does not have this option.- **Widget to enable:** Navigation Menu, switched on under **The Plus Addons > Widgets**.- **A header template.** Add the widget to your site's header so the menu shows on every page. Build the header with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro's Theme Builder.- **A WordPress menu** under **Appearance > Menus**, if you use the **Default** menu type. ## Steps - Set up the desktop menu in **Layout** and **Content**.- In **Content > Mobile Menu**, keep **Responsive Mobile Menu** on and set **Menu Type** to **Off Canvas**.- Set **Custom Width** for the panel (up to 750px). 280–320px suits most phones.- Set **Open Mobile Menu**. **Open Mobile Menu** (default 991px) is the *widest* screen that gets the mobile menu. At that width and narrower, visitors see the mobile menu; wider screens get the normal menu.- Keep **Menu Content** on **Normal Menu**, pick the menu in **Select Menu**, and line the items up with **Navigation Alignment**. ![Custom Width for the Off Canvas panel in the Mobile Menu section](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-off-canvas-width.webp) When visitors tap the menu button, the panel slides in from the left edge of the screen. The “×” at the top closes it. ![The off canvas menu open on a phone](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-result-offcanvas.webp) In the mobile menu, tapping an item that has a submenu opens the submenu instead of following that item’s link. If the parent page matters, add it to its own submenu too. ## Limitations - **Pro only.** Navigation Menu Lite only has a toggle mobile menu.- **No Template Menu.** The Elementor Templates picker is hidden for Off Canvas. For a designed mobile menu, use the Toggle type with a [template](https://theplusaddons.com/docs/create-a-hamburger-mobile-menu-with-elementor-template/).- **The button is always the standard three lines.** Toggle Style and Toggle Alignment only apply to the Toggle type.- **The close button uses Font Awesome 5.** If nothing on the page loads Font Awesome, the “×” does not show. Make sure Font Awesome loads on your site.- **Mobile Click Close Menu** only closes the panel when visitors tap the header area, not the rest of the page. ## Troubleshooting ### The panel opens but I can’t see how to close it Font Awesome is not loaded on the page, so the close icon is blank. It is still there at the top right of the panel — loading Font Awesome makes it visible. ### The panel is empty Pick a menu in **Mobile Menu > Select Menu**, and check the menu has items. ### The panel is cut off at the bottom A parent container in the header has a fixed height or hides overflow. Remove it. If the header is sticky, turn on **Style > Sticky Mobile Menu > Scroll Overflow**. ## Related Docs - [Create a toggle menu for mobile](https://theplusaddons.com/docs/create-a-toggle-menu-for-mobile-in-elementor/)- [Create an off canvas popup menu](https://theplusaddons.com/docs/off-canvas-popup-menu-in-elementor/)- [Create a side menu](https://theplusaddons.com/docs/create-a-side-menu-in-elementor/) ## Frequently Asked Questions **Q: What do I need before creating an off canvas mobile menu in Elementor?** A: The setup depends on the Navigation Menu widget from The Plus Addons for Elementor Pro, plus a header template where the menu can appear on every page. The page also notes that if you use the Default menu type, you need a WordPress menu under Appearance > Menus. That matters because the off canvas panel is part of the header experience, not a standalone page element. **Q: How do I make the mobile menu slide in from the side instead of pushing the page down?** A: Set the Mobile Menu type to Off Canvas in Content > Mobile Menu. That mode makes the panel slide in from the left edge and cover the page instead of shifting content downward, which is why it behaves more like a drawer than a normal dropdown. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this as one of three mobile menu types in the Navigation Menu widget. **Q: What is a good width for an off canvas mobile menu panel?** A: The page says Custom Width can go up to 750px, but 280 to 320px suits most phones. That range is useful because a narrower panel feels natural on small screens and avoids wasting space on content that should stay behind the drawer. Wider values are possible, but they are more likely to feel oversized on typical mobile devices. **Q: Why does the close icon not show on my off canvas menu?** A: The close button depends on Font Awesome 5. If Font Awesome is not loading on the page, the top-right close icon still exists but appears blank. In practice, that means the panel is open and closable even when the icon is invisible, so the fix is about loading Font Awesome rather than changing the menu settings. **Q: Why is my off canvas menu panel empty?** A: An empty panel usually means no menu was selected or the selected WordPress menu has no items. The key setting is Mobile Menu > Select Menu, and it needs a real menu behind it to render anything inside the drawer. This is easy to miss when testing because the panel can open normally while still showing nothing. **Q: Should I use Off Canvas or a toggle menu for a designed mobile header?** A: Off Canvas is better when you want a sliding drawer with a standard three-line button, but it does not support Template Menu because the Elementor Templates picker is hidden for this mode. If you want a designed mobile menu built from a template, the page points to Toggle type instead. That makes Off Canvas a cleaner choice for simple navigation and Toggle better for custom layouts.