Skip to content

How to Create an Off Canvas Mobile Menu in WordPress?

Updated On : September 27, 2026By : Reading Time : 1 minute

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.
Table of Contents

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.

LIVE BLOCK LINK

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

  1. Add the Navigation Menu block to your header template and set up the menu.
  1. Open Mobile Menu, turn on Responsive Mobile Menu and set Open Mobile Menu (Screen Width).
  1. 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
  1. 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.

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

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

Why isn’t the off canvas mobile menu showing on my site?

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

What do I need before creating an off canvas mobile menu in WordPress?

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.

Can I use a custom menu instead of a WordPress menu for the mobile off canvas panel?

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.

What is Show Template used for in an off canvas mobile menu?

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.

What settings matter most for making an off canvas mobile menu usable?

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.

Last reviewed: September 27, 2026

Related Docs

How to Add a Form in WordPress?
icon
How to Add a Mobile Menu in WordPress?
icon
How To Add a Navigation Menu in WordPress?
icon
How to Add a Newsletter in WordPress?
icon
How to Add a Popup in WordPress?
icon
How to Add Cloudflare Turnstile CAPTCHA in WordPress Form?
icon
123………11