---
title: "How to Create a Hamburger Mobile Menu with Pattern in WordPress?"
url: https://nexterwp.com/docs/create-a-hamburger-mobile-menu-with-pattern-in-wordpress/
date: 2024-12-02
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add custom content to your mobile off canvas mobile menu in WordPress? Using the Pattern, you can add unique content to your off canvas menu. With..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Hamburger-Mobile-Menu-with-Pattern-in-WordPress_-1024x519.jpg
word_count: 306
---

# How to Create a Hamburger Mobile Menu with Pattern in WordPress?

## Key Takeaways

- Nexter Blocks includes a Navigation Menu block that allows users to create an off canvas mobile menu using a Pattern.
- Users can create a Pattern for the mobile menu by navigating to Appearance > Patterns > Add New Pattern.
- The Responsive Mobile Menu toggle must be enabled in the Mobile Menu tab to specify the minimum width for the mobile menu.

Do you want to add custom content to your mobile off canvas mobile menu in WordPress? Using the Pattern, you can add unique content to your off canvas menu.

With the Navigation Menu block from the Nexter Blocks, you can easily use a Pattern as an off canvas menu for the mobile menu.

*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, first, you have to create a Pattern with the menu content.

You can go to **Appearance** > **Patterns **> **Add New Pattern **to create a Pattern.

Then, 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-select-pattern.gif)

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

3. Don’t select anything in the **Mobile Menu **section.

4. Then, from the **Menu Type** section, select **Off Canvas**.

5. Now enable the **Show Template** toggle and then, select your mobile menu pattern from the **Pattern** dropdown.

> *Note: You can also create a Pattern from here by clicking on the ****Create Pattern**** button.*

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 your Pattern as the off canvas mobile menu.

## Frequently Asked Questions

**Q: What should I do if my mobile menu isn't displaying after following the steps?**
A: If your mobile menu isn't showing, check that you've enabled the Responsive Mobile Menu toggle in the Mobile Menu tab. This setting is crucial for activating the mobile version of your menu. Additionally, ensure that you've set the minimum width for the mobile menu in the Open Mobile Menu section. If these settings are correct and it still doesn't display, verify that your Pattern is properly created and selected in the Pattern dropdown.

**Q: What are the best practices for setting up a mobile menu with Nexter Blocks?**
A: When setting up a mobile menu with Nexter Blocks, ensure that you select Off Canvas as the Menu Type for a smooth user experience. It's also advisable to enable the Show Template toggle to display your selected Pattern correctly. Pay attention to the popup width in the Custom Width section to ensure it fits well on various devices. These practices help create an effective and visually appealing mobile menu.