---
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-05-23
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: 616
---

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

## 

- Utilizes the Navigation Menu widget from The Plus Addons for Elementor to create an off canvas mobile menu.
- Requires installation and activation of The Plus Addons for Elementor to access the off canvas menu feature.
- Enables the Responsive Mobile Menu toggle and selects Off Canvas from the Menu Type dropdown in the Mobile Menu tab.

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.

With the Navigation Menu widget in The Plus Addons for Elementor, you can configure an off canvas menu specifically for mobile devices directly in the Elementor editor, without a separate menu plugin.

*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/).*

**Best Used For:**

- 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

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

For a slide-over panel menu triggered by a button click rather than a viewport breakpoint, see [how to create an off canvas popup menu in Elementor](https://theplusaddons.com/docs/off-canvas-popup-menu-in-elementor/) using The Plus Addons for Elementor.

Must read, [8 best mega menu examples + learn how to create them.](https://theplusaddons.com/blog/best-mega-menu-examples/)

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.

For a permanently visible sidebar navigation that sits alongside page content in Elementor, see [how to create a side menu in Elementor](https://theplusaddons.com/docs/create-a-side-menu-in-elementor/).

When you click the toggle button on mobile, the off canvas menu slides into view from the side of the screen.

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/).