Build a complete site header

Use this workflow when setting up a new header or replacing an existing one. It coordinates layout, menu locations, optional bars, mobile navigation, and scroll behavior without treating them as one setting.

Prepare the header inputs

Prepare:

• The desktop and mobile logos in Settings → POM Theme → Design system → Brand.
• The WordPress menus visitors will use.
• A decision about login-specific navigation.
• A representative page with enough content to test scrolling.

Build the header

1. Open Settings → POM Theme → Site layout → Header → Header general settings.
2. Choose The header style and layout. The selected structure determines which desktop menu locations are relevant.
3. Decide whether Full-width header matches the intended alignment.
4. Save the settings before assigning menus. Some locations, including optional bars and split-menu positions, are registered according to the enabled layout.
5. Open Appearance → Menus → Manage Locations and assign the required desktop menus.
6. Return to Site layout → Header and configure only the optional areas the design uses: Header banner, Full screen navigation, Side navigation, Top bar, or Bottom bar.
7. Set shared header colors in Header colors and type in Header typography.
8. Configure Mobile navigation settings. independently, including its menu titles and visual treatment.
9. Add sticky, auto-hide, or transparent behavior only after the static header is correct.
10. Save and review the public result.

Assign the right menu locations

POM Theme registers dedicated locations for:

• Primary, Primary (left side), and Primary (right side) where applicable
• Primary (logged-in users) and the supported logged-in variants
• Mobile and Mobile 2
• Top bar (left side) and Top bar (right side) when the top bar is enabled
• Bottom bar (left side) and Bottom bar (right side) when the bottom bar is enabled
• Header side navigation
• Header full screen navigation
• Logged in dropdown

Assign only locations used by the chosen structure. An assigned mobile menu does not replace the desktop primary menu.

Sign off the header

The header is ready when:

• The intended menu appears for signed-out visitors.
• Any logged-in menu variant appears in an authenticated session.
• The logo and navigation align at common desktop widths.
• The mobile trigger opens the correct panel and both configured mobile menus behave as expected.
• Keyboard focus can reach and operate interactive header controls.
• Sticky or transparent states keep adequate contrast while scrolling.

Use Header settings reference for the scope of each settings subsection and Configure mobile navigation for the mobile panel.