--- 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-09-27 lang: en author: "Aditya Sharma" description: "An off canvas menu slides in from the side of the screen, giving mobile visitors a full panel of links. The Navigation Menu block in Nexter Blocks Pro has an..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-an-Off-Canvas-Mobile-Menu-in-WordPress_-1024x519.jpg word_count: 240 --- # How to Create an Off Canvas Mobile Menu in WordPress? ## Key Takeaways - Nexter Blocks Navigation Menu block adds an off canvas mobile menu in WordPress that slides in and out on mobile devices. - Responsive Mobile Menu toggle sets the breakpoint with Open Mobile Menu (Screen Width), and the Mobile Menu dropdown offers Standard for a registered WordPress menu or Custom for a custom navigation layout. - Off Canvas menu settings include Show Template for pattern content, Custom Width for panel size, Toggle Style for the hamburger button, Toggle Alignment, and Navigation Alignment inside the panel. An off canvas menu slides in from the side of the screen, giving mobile visitors a full panel of links. The Navigation Menu block in Nexter Blocks Pro has an Off Canvas mobile menu type. *For every Navigation Menu setting in one place, see the [Navigation Menu block guide](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-navigation-menu/) ## Before You Start - **Edition:** **Pro** — The Off Canvas mobile menu needs Nexter Blocks Pro.- **Block to enable:** Navigation Menu, switched on under **Nexter > Blocks** in your WordPress dashboard. ## Steps - Add the **Navigation Menu** block to your header template and set up the menu. - Open **Mobile Menu**, turn on **Responsive Mobile Menu** and set **Open Mobile Menu (Screen Width)**. - Choose **Custom** or **Standard** under Mobile Menu and set **Menu Type** to **Off Canvas**. ![Menu Type set to Off Canvas with Show Template and Select Pattern](https://nexterwp.com/wp-content/uploads/2026/09/navigation-menu-offcanvas.webp) - Set **Custom Width** for the panel, then **Toggle Style**, **Toggle Alignment** and **Navigation Alignment**. Save. ## How It Behaves - Below the chosen width, a hamburger button shows.- Tapping it slides the menu panel over the page; the close icon or a tap outside (with Mobile Click Close Menu on) closes it.- Turn on **Show Template** to show a pattern in the panel instead of the menu links. See [the hamburger menu with a pattern](https://nexterwp.com/docs/create-a-hamburger-mobile-menu-with-pattern-in-wordpress/). ## Limitations - **Pro only.** Without Pro, no hamburger is shown. ## Troubleshooting ### The panel is too wide or too narrow Change **Custom Width** in the Mobile Menu panel. ## Related Docs - [Create a toggle menu for mobile](https://nexterwp.com/docs/create-a-wordpress-toggle-menu-for-mobile/)- [Create a hamburger menu with a pattern](https://nexterwp.com/docs/create-a-hamburger-mobile-menu-with-pattern-in-wordpress/)- [Navigation Menu block: all settings](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/) ## Frequently Asked Questions **Q: Why isn’t the off canvas mobile menu showing on my site?** A: The usual miss is that the Navigation Menu block has to be added to the header template, and the Responsive Mobile Menu toggle has to be enabled in the Mobile Menu tab. Nexter Blocks powers this setup, so if the block is not installed and activated, the mobile panel will not appear. The breakpoint also matters because the menu only switches when the screen width reaches the value set in Open Mobile Menu (Screen Width). **Q: What do I need before creating an off canvas mobile menu in WordPress?** A: Nexter Blocks needs to be installed and activated because the Navigation Menu block is part of it. The menu also has to live inside a header template, and Nexter Builder can be used to create that header template. That setup matters because the off canvas behavior is tied to the header navigation, not a standalone page element. **Q: Can I use a custom menu instead of a WordPress menu for the mobile off canvas panel?** A: The Navigation Menu block supports both Standard and Custom in the Mobile Menu dropdown when Manual Menu is selected in the Navigation Bar. Standard uses a registered WordPress menu, while Custom uses your own navigation layout as the mobile menu. If WordPress Menu is selected in the Navigation Bar, only Standard is available, so that choice limits how you build the mobile version. **Q: What is Show Template used for in an off canvas mobile menu?** A: Show Template lets you use a pattern as the off canvas menu content, which is useful when you want more than just links inside the panel. The page specifically calls out layouts like a logo, links, and social icons. That makes it a better fit when the mobile menu needs extra branding or secondary actions instead of a plain list. **Q: What settings matter most for making an off canvas mobile menu usable?** A: The key controls are Custom Width, Toggle Style, Toggle Alignment, and Navigation Alignment. Custom Width decides how much of the screen the panel covers, which affects how much content stays visible behind it. Toggle Alignment places the hamburger button left, center, or right in its container, while Navigation Alignment controls how items sit inside the panel.