Flexible Headers and Mobile Menus

What it helps you do

Build headers that match how your site is structured — full-width nav on desktop, a slide-out drawer on phones, optional utility links, and hero layouts where the menu sits over photography without a solid bar blocking the image.

Where to find it

  • Appearance → Customize → Header & Menus
    • Desktop — masthead layout, transparent hero behavior, sticky and floating options, link colors.
    • Mobile — drawer width, breakpoint, background, link colors, hamburger and close icon styles.
    • Logo — header, reverse, scroll, and mobile logo sizes.
    • Utility Nav — extra links (phone, login, CTA) beside the main menu.
    • Button — optional header call-to-action.
    • Accent Border — decorative border under the masthead.
  • Appearance → Menus — assign WordPress menus to theme menu locations.

How to use it

  1. Create or edit menus under Appearance → Menus and assign them to the header location.
  2. In Customize → Header & Menus → Desktop, set Transparent Masthead to Enabled if the first block on the page is a hero or full-width image section.
  3. Turn on Sticky Menu to keep navigation visible while scrolling, or Floating Masthead for a pill-shaped bar with blur and opacity controls.
  4. Open Mobile to style the drawer — width, background, Link Color, and icon sizes.
  5. Add utility links under Utility Nav when you need phone, account, or secondary CTAs outside the main tree.
  6. Publish and test on a real phone width (or the Customizer mobile preview).

What happens automatically

  • When Transparent Masthead is enabled and the page starts with a hero-style block, the header overlays the first section instead of pushing it down.
  • Sticky Menu adds scroll states so the masthead can shrink or change treatment as visitors move down the page.
  • Scroll Logo can swap to an alternate logo after the visitor scrolls (configure under Logo).
  • The mobile drawer inherits link colors from Mobile settings so text stays readable on dark or light drawer backgrounds.
  • Reverse-print treatments flip icon and banner colors when the masthead sits on photography.

Things to know

  • Transparent headers work best when the first block is a hero, background section, or similar full-bleed layout — ordinary text-first pages usually look better with a solid masthead.
  • Breakpoint controls when the desktop masthead switches to the drawer; raise it if your menu should collapse earlier on tablets.
  • Transparent Masthead Submenu chooses whether dropdowns stay transparent or use a solid color over heroes.
  • Mega menus from the Dirigible Mega Menu plugin appear inside the same header system — assign mega menus from Appearance → Menus.

Related settings and guides