Customize the navigation overlay

The navigation overlay is the full-screen menu that appears when a visitor taps the hamburger icon on a mobile device. On block themes, you can customize the overlay’s design and content.

When your site’s menu collapses into a hamburger icon on smaller screens, tapping that icon opens the navigation overlay. By default, the overlay displays the same menu links as the desktop version with minimal styling:

With a custom overlay, you control the overlay’s full design. You can change its background color, typography, and layout. You can add blocks like social icons, images, or calls to action. You can even display a different menu in the overlay than on desktop.

Custom overlays are saved as template parts—reusable components you can manage alongside your other templates and patterns. Your theme may also include pre-built overlay designs suited to its styling.

You create a custom overlay from the Navigation block settings. To create a custom overlay, follow these steps:

1. From your site’s dashboard, navigate to Appearance → Editor.
2. Select Patterns and choose the template or template part that contains your menu, such as the header.
3. Open List View and select the Navigation block.
4. In the block settings sidebar, locate the Overlay section.
5. Under “Overlay template“, click the “Create overlay” button:

The overlay opens in the template part editor—a blank canvas where you can add any blocks you want.

The overlay editor works like any other template part. Add blocks, arrange them, and style them to create the mobile menu experience you want. The following sections of this guide will walk you through how to customize the navigation overlay.

Instead of building an overlay from scratch, you can start with a pre-built overlay design provided by WordPress or your theme.

After creating the overlay, follow these steps to apply a pre-built design:

1. Open the settings sidebar.
2. Locate the Design section.
3. Browse the available overlay patterns.
4. Select a pattern to apply it to your overlay.
5. Customize the pattern’s content and styling as needed.
6. Click Save.

The available patterns depend on your theme. Some themes include overlay designs that match the theme’s styling.

Visitors need a way to close the overlay and return to the page. The Navigation Overlay Close block adds a close button to your overlay. This is included in most designs, but you can manually add a close button with these steps:

1. In the overlay editor, click the + block inserter.
2. Search for “close” and select the Navigation Overlay Close block.
3. In the block settings, choose a display mode:
   • Icon: Displays an X button.
   • Text: Displays the word “Close.” Click the text in the editor to change it to a custom label.
   • Both: Displays an X button alongside the text label.
4. Style the close button using the block settings for color, typography, and dimensions.
5. Position the close button as needed. For example, you can wrap it in a Row block and set the justification to Right.
6. Click Save.

You can display a different set of menu links in the overlay than on desktop—for example, a simplified mobile menu or one that includes additional links. To use a different menu, follow these steps:

1. In the overlay editor, select the Navigation block inside your overlay.
2. In the block settings sidebar, click the (⋮) next to Menu.
3. Select the “Create new menu” option.
4. Add the pages and links you want to appear in the mobile overlay.
5. Click Save.

Visitors on larger screens see your desktop menu. Visitors on smaller screens see the overlay menu you configured here.

To modify an overlay you have already created, follow these steps:

1. From your site’s dashboard, navigate to Appearance → Editor.
2. Select Patterns and choose the template or template part that contains your menu, such as the header.
3. Open List View and select the Navigation block.
4. In the block settings sidebar, find the Overlay section.
5. Select the overlay you want to edit from the dropdown.
6. Click Edit to open the overlay in the template part editor:

You can also edit overlays from the Patterns screen. Navigate to Appearance → Editor, open the Patterns section, and select Template Parts. Your overlays appear under the Overlay area.