---
title: "How to Create an Off Canvas Mobile Menu in WordPress?"
url: https://nexterwp.com/docs/create-an-off-canvas-mobile-menu-in-wordpress/
date: 2024-12-02
modified: 2026-04-14
author: "Aditya Sharma"
description: "Adding an off canvas mobile menu in WordPress can provide a seamless and user-friendly experience. This type of menu slides in and out of the screen, allowing users to easily..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-an-Off-Canvas-Mobile-Menu-in-WordPress_-1024x519.jpg
word_count: 364
---

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

## Key Takeaways

- Nexter Blocks includes a Navigation Menu block that allows users to add an off canvas mobile menu.
- Users can specify the minimum width for enabling the mobile menu in the Open Mobile Menu section.
- The Off Canvas option can be selected from the Menu Type dropdown when configuring the mobile menu.

Adding an off canvas mobile menu in WordPress can provide a seamless and user-friendly experience. This type of menu slides in and out of the screen, allowing users to easily navigate your website without taking up too much space on their mobile screens.

With the Navigation Menu block from the Nexter Blocks, you can easily add an off canvas menu for the mobile.

*To check the complete feature overview documentation of the Nexter Blocks Navigation Menu block, [click here](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-navigation-menu/)

To do this, add the Navigation Menu block 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/)*.* 

1. From the **Navigation Bar** tab, select the appropriate **Type**, **Layout** and menu.

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

![](https://nexterwp.com/wp-content/uploads/2024/12/navigation-menu-mobile-menu-off-canvas.gif)

In the **Open Mobile Menu(Screen Width)** section, you can specify the minimum width for enabling the mobile menu.

3. If you’ve selected **Manual Menu** in the **Navigation Bar**, then you’ll see two options in the **Mobile Menu **dropdown -

- **Standard** - For using a WordPress menu as the mobile menu.

- **Custom** -  For using your custom menu as the mobile menu.

Let’s select **Standard** here.

> *Note: If you’ve selected ****WordPress Menu ****in the ****Navigation Bar****,**** ****then you’ll only get the Standard option in the ****Mobile Menu ****section.*

4. Select your menu from the **Select Menu** dropdown.

> *Note: For the ****Custom**** option you won’t get this option as your custom menu will be the mobile menu.*

5. Then, from the **Menu Type** select, select **Off Canvas**.

From the **Show Template** toggle, you can use a pattern as an off canvas menu.

You can set the popup width from the **Custom Width** section.

From the **Toggle Style** dropdown, you can select different toggle styles.

From the **Toggle Alignment** section, you can align the toggle button.

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

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

![](https://nexterwp.com/wp-content/uploads/2024/12/navigation-menu-mobile-menu-off-canvas-demo.gif)

## Frequently Asked Questions

**Q: What should I do if the off canvas mobile menu doesn't appear?**
A: If the off canvas mobile menu isn't showing, ensure that the Navigation Menu block from Nexter Blocks is installed and activated. This block is essential for adding the mobile menu functionality. Additionally, check that you've enabled the Responsive Mobile Menu toggle in the Mobile Menu tab and that your screen width meets the specified minimum width for the mobile menu.

**Q: What is the best practice for setting the popup width of the off canvas menu?**
A: Setting the popup width for the off canvas menu is crucial for user experience. You can specify the width in the Custom Width section. A common practice is to set it to a width that allows easy navigation without overwhelming the screen. Test different widths to see what works best for your design and user needs.

**Q: Does the off canvas mobile menu work with all themes?**
A: The off canvas mobile menu is specifically designed to work with the Nexter Theme and requires the Nexter Blocks plugin. If you're using another theme, the functionality may not be available. Ensure you're utilizing the Nexter Theme to take full advantage of this feature.