Configure the mobile menu

How to edit the hamburger drawer for phones and small screens

The Mobile Menu panel controls the full-screen drawer visitors open from the phone-size hamburger icon. It is a separate surface from the desktop header — edits here do not affect the desktop chrome.

What is this for?

Mobile Menu config owns the drawer UI: which links show, which CTA sits at the top, whether a search box is exposed, and how the drawer animates in. Use it to give phone visitors a leaner, touch-friendly navigation than the desktop header.

Good use cases

Example 1: Streamline Acme's mobile drawer for shop-first visitors. Acme Coffee Roasters notices the phone drawer is 12 items deep (brewing guides, origin stories, wholesale FAQ…) and Shop is buried. Open Mobile Menu, wire up a prominent "Shop beans" CTA above the nav and a shorter list (Shop, Subscribe, Brewing, About, Contact). Desktop header stays full-depth.

Acme's populated Mobile Menu form:

On save:

The rendered drawer on a phone viewport:

Example 2: Add a "Book a tasting" button for a shop visit. Acme runs a Saturday cupping at its Portland roastery and wants phone visitors to book without hunting. Set the CTA slot text to Book a tasting and URL /events/saturday-cupping. Every phone visitor sees it first in the drawer.

Example 3: Enable the search box. Phone visitors often type "cold brew" or "ethiopia" to go straight to a product. Toggle "Show search" on — the drawer grows a search input at the top that targets your site search.

What NOT to use this for

• Do not use Mobile Menu to build the menu tree. The list of links lives in Appearance → Menu; tick "Mobile Menu" as a location so your menu appears in the drawer.
• Do not expect mobile-menu edits to affect the desktop header. These two surfaces are saved separately. Desktop header edits live in Theme Editor → Header.

How this connects to other features

• Menu — the list of drawer links is built in Appearance → Menu with "Mobile Menu" ticked as a location.
• Header — the hamburger icon that opens this drawer is rendered by the Header config. Styling of the hamburger lives there.
• Themes — the drawer palette inherits from the active Color Swatch.
• Templates — the active Mobile Nav template (id 3 on staging) wraps whatever Mobile Menu config produces.

Before you start

• You are signed in to SGEN as an admin.
• A mobile-friendly menu is already built under Appearance → Menu with the "Mobile Menu" location ticked (or you will build it after).

Where to go

1. Open the left navigation.
2. Click Appearance → Theme Editor → Mobile Menu tab.

Steps

1. Set the CTA

The CTA slot sits at the top of the drawer above the nav list. Edit the button text and URL. Leave both blank to hide the CTA.

2. Toggle drawer features

• Search box — shows an input at the top of the drawer.
• Social icons — appends the site's social links as tap targets at the bottom.
• Animation — pick slide-in, fade-in, or overlay.

3. Pick the menu that fills the drawer

The drawer renders whatever menu has "Mobile Menu" ticked as a location. Manage that tree in Appearance → Menu.

4. Save Changes

What success looks like

• Open the public site on a phone (or in a narrow browser window). Tap the hamburger — the drawer opens with the new CTA, search box, or item list.
• Desktop header is unchanged.

What to do if it does not work

• The drawer is empty of links. Make sure a menu has the "Mobile Menu" location ticked in Appearance → Menu.
• The CTA I added is missing. Confirm both text and URL are set; an empty URL hides the button.
• My edits are not visible on iPhone Safari. Hard-reload (iOS: pull down to refresh twice) — mobile browsers cache aggressively.

Next step