Mobile

Usage

Open Appearance → Customize → Header & Menus → Mobile to control when the site switches to the drawer menu and how that drawer looks. Set the Breakpoint where desktop navigation collapses, then tune bar height, drawer width, and link colors.

Customize the Hamburger and Close icons so they match your palette. Drawer Overlay dims the page behind the open menu — adjust opacity if the backdrop feels too heavy or too faint.

When to use it

• After building desktop navigation, when phone layouts feel cramped or links are hard to tap.
• Sites with wide photography heroes that need a reverse-print hamburger on the first screen.
• Long nested menus that need a wider drawer or taller mobile bar.

Tips

• Mobile Background tints the top bar behind the hamburger; drawer link colors are separate below.
• Reverse Print on mobile affects social icons and related drawer text — set explicit Drawer Color values for links rather than relying on desktop colors alone.
• If the menu flips to mobile too early (or too late), nudge Breakpoint a few pixels at a time and preview on a real device.
• Match Close Color to your link color so the X does not disappear on dark drawer backgrounds.