Configure mobile navigation

POM Theme gives mobile navigation its own menus and presentation. It does not automatically reproduce every desktop menu location, so configure and test it as a separate visitor journey.

Set the mobile panel

Open Settings → POM Theme → Site layout → Mobile navigation → Mobile navigation settings.

1. Choose Mobile navigation side: Left or Right.
2. Choose Mobile navigation size: Default or Large.
3. Set Mobile navigation align to Left, Center, or Right.
4. Enable Enable overlay? when the open panel should place an overlay over the page.
5. Enter Mobile menu 1 title and Mobile menu 2 title only when the corresponding menu needs a visible heading.
6. Optionally select a Background image.
7. Set the navigation background, normal text, and current/hover text colors.
8. Add Mobile navigation footer copyright text when the panel needs footer copy.
9. Save the settings.

Assign the mobile menus

Go to Appearance → Menus → Manage Locations and assign:

• Mobile for the first mobile menu.
• Mobile 2 for the optional second menu.

The two title fields label these menu areas; they do not create or assign the WordPress menus themselves.

Review the interaction

At a narrow viewport:

1. Open the menu with the header trigger.
2. Confirm the panel enters from the selected side.
3. Verify both menus, their titles, and the footer text.
4. Open and close menu sublevels.
5. Follow a link and confirm the panel does not obstruct the destination.
6. Check the overlay and page scrolling behavior.

Repeat with keyboard navigation. The trigger must be reachable, the open panel must remain operable, and current or hovered links must retain sufficient contrast.

Diagnose an empty or incorrect panel

• If no links appear, check the Mobile and Mobile 2 assignments rather than the desktop Primary location.
• If only the second title appears, confirm that Mobile 2 has a menu assigned.
• If the panel is hard to read, compare all three color controls with the background image and overlay.
• If the logo is wrong, configure the mobile logo in the Design system’s brand settings; it is separate from these navigation-panel controls.

Finish with the responsive layout checklist.