Configure the mobile menu

In short. The Mobile Menu panel in Appearance → Theme Editor → Mobile Menu controls everything in the phone hamburger drawer except the link list. Set a CTA button above the nav, toggle search and social icons, pick the drawer animation, then click Save Changes once. The drawer updates site-wide on the next page load. The link list itself lives in Appearance → Menu — tick "Mobile Menu" as a location there.

On this page: What this panel controls · Fields at a glance · Step-by-step · Common patterns · Troubleshooting · Related surfaces

How to edit the hamburger drawer for phones and small screens

Purpose

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, and edits to the desktop Header panel do not propagate into this drawer.

One rule to remember: the Mobile Menu panel owns the drawer's features; the Menu panel owns the links inside it. This doc walks the fields the Mobile Menu panel itself owns. For the link tree see Build a navigation menu.

What it covers

The Mobile Menu panel owns: the CTA button at the top of the drawer (text + URL), the search-box toggle, the social-icons row toggle, and the drawer animation. It does not own the navigation links (those live in Appearance → Menu with "Mobile Menu" ticked as a location), the hamburger button itself (that's the Header panel), or the drawer's colour palette (that inherits from the active Theme swatch).

A typical save writes four or five fields at once. After configuring your mobile drawer, the panel's slot summary shows:

The Mobile Menu panel works hand-in-hand with three other surfaces — Menu (link list), Header (the hamburger button itself), and Themes (palette inheritance). Edits in any of those three show up in the drawer automatically.

Examples

Example 1: Set a shop-first CTA and a shorter nav. Your site's phone drawer has 12 items and Shop is buried. Open Mobile Menu, add a "Shop now" CTA and assign a trimmed five-item "Mobile Navigation" menu. Desktop header stays full-depth.

The populated Mobile Menu form:

On save:

The rendered drawer on a phone viewport:

Example 2: Swap the CTA for a campaign. You want phone visitors to register for a Saturday workshop. Set CTA text to Join the workshop and URL to /events/saturday-workshop. When the event ends, change it back — one save reverts the drawer.

The CTA-only change — two fields, one save:

Treat the CTA slot as your one mobile-only campaign lever — the most visible tap target in the drawer. Use it for the single action you most want phone visitors to take this week.

Example 3: Enable search and pick an animation. Toggle Show search on to add a search input at the top of the drawer — it targets your site search (not a separate index). Before enabling it, confirm your search index is populated under Settings → Search; an empty index gives visitors a worse experience than no search at all. For animation, SGEN ships slide-in (from the right edge — the default), fade-in (cross-fade), and overlay (instant cover). Pick whichever matches your site's feel; all three are equally fast.

Example 4: Separate the mobile and desktop menus. Your desktop header has 12 items; the phone drawer should be shorter. Build a second menu in Appearance → Menu named "Mobile Navigation" with 5 items (Shop · Subscribe · New Arrivals · About · Contact), tick "Mobile Menu" as its location, save. The drawer now renders 5 items. The desktop header is unaffected — it still pulls from "Main Navigation" with Header ticked.

How the two-menu setup looks in the menu builder:

This is the most common setup: one desktop menu, one trimmed mobile menu, one footer menu — each location pulls its own tree.

Example 5: Clean up the drawer for a launch week. You want fewer competing taps — just the CTA and the nav. Flip Show social icons off and save. The bottom Instagram / X / YouTube / Pinterest row disappears site-wide on the next reload. Re-enable it after launch week.

Fields

The Mobile Menu panel exposes five editable fields plus three behaviour toggles. Most teams only touch three or four on a given save.

Field IDs in the saved config map one-to-one: mobile_cta, mobile_cta_url, mobile_show_search, mobile_social_icons, mobile_animation. The save-flash banner names exactly which of these wrote so you can confirm the change stuck. The drawer's palette and font-family come from the active Theme + Styles & Layouts panels — there is no per-drawer colour picker.

To hide the CTA entirely, leave both CTA button text and CTA button URL blank. The drawer reflows so the search box (if enabled) sits flush against the top, and the nav list starts directly under it.

Generated CSS variables (read these from Custom CSS)

Mobile Menu config writes a small set of drawer-specific CSS variables on top of the swatch tokens. Use these names in Appearance → Custom CSS when you need a one-off override that the panel cannot express — a different shade of CTA on iPhone notch devices, an extra-tall drawer for tablets, a fade-out delay on close.

:root { /* CTA */ --mobile-cta-label: 'Shop now'; --mobile-cta-url: '/shop'; --mobile-cta-bg: var(--color-primary); --mobile-cta-color: #ffffff; /* Drawer features */ --mobile-show-search: 1; --mobile-show-social: 1; --mobile-animation: slide-in; /* slide-in | fade-in | overlay */ /* Drawer chrome (inherited from swatch) */ --mobile-drawer-bg: var(--color-background); --mobile-drawer-color: var(--color-text); --mobile-drawer-width: 360px; --mobile-drawer-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);}

A practical override: tighten the drawer at iPhone-mini width without abandoning the slide-in animation.

/* Narrower drawer + chunkier CTA on the smallest phones */@media (max-width: 380px) { .site-mobile-menu { --mobile-drawer-width: 320px; } .site-mobile-menu .btn-cta { padding: 16px; font-size: 16px; }}/* Slightly taller hit-targets in every drawer item — accessibility win */.site-mobile-menu nav a { padding: 16px 0; min-height: 48px;}/* Soften the slide-in curve on close */.site-mobile-menu.is-closing { transition: transform .28s cubic-bezier(.4, 0, .2, 1);}

The .site-mobile-menu selector is the drawer's outer wrapper; .is-closing is added by SGEN's runtime during the close animation. Use both for any drawer-only styling that the panel does not expose. Edits to swatch variables (--color-primary, --color-background) automatically repaint the drawer — no Mobile Menu save needed.

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. The Mobile Menu panel itself has no link editor — looking for one means you are on the wrong tab.
• 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. A change to the Mobile Menu's CTA does not touch the desktop header's CTAs, and vice versa.
• Do not rely on the Mobile Menu panel for tablet-only behaviour. SGEN's mobile breakpoint cuts in at 767 px and below. Tablets in landscape orientation typically render the desktop header, not the mobile drawer. If you need a tablet-specific lock-up, write a Custom CSS rule scoped to the tablet breakpoint range.
• Do not paste raw <a> HTML into the CTA button text field. The sanitiser strips it. Use plain text for the label and the URL field for the destination.
• Do not use the drawer for high-conversion CTAs visitors need to find first. A phone visitor has to tap the hamburger to see the drawer at all, which is one extra step compared to the desktop header. Put the most-important CTA in the page body's hero section; use the drawer's CTA slot for a secondary, "while you're already here" action.
• Do not script Mobile Menu saves from a cold form. The mobile-menu POST replaces the entire config blob, so a script that posts only the changed field will null out everything else. Always edit through the admin UI which hydrates every field before serialising.
• Do not use the drawer to display a different brand/logo than the desktop header. The drawer's wordmark inherits from the active Theme's logo slot — there is no per-drawer logo field. If you genuinely need a different mobile lock-up, swap the Theme's logo for a wordmark that reads well at both sizes.

Save your mobile menu in one pass

The Mobile Menu panel saves as one bundle — all five fields at once. The safest workflow:

1. Open the full Mobile Menu page and let it finish loading.
2. Make every change you want — CTA, toggles, animation.
3. Click Save Changes once.

Why it matters: each save replaces the entire config record. A save that posts only part of the bundle (half-loaded form, external script) leaves the missing fields blank. Always edit through the admin form, fully loaded.

How this connects to other features

• Menu — the list of drawer links is built in Appearance → Menu with "Mobile Menu" ticked as a location. Multiple menus can compete for the Mobile Menu location; the most recently saved one wins. Build a separate "Mobile Navigation" menu if you want a shorter list than the desktop header.
• Header — the hamburger icon that opens this drawer is rendered by the Header config. Styling of the hamburger (its colour, its size, whether it shows on tablets) lives there. The drawer itself is unaware of how the hamburger is styled.
• Themes — the drawer's palette inherits from the active Color Swatch's --color-background / --color-text / --color-primary. A swatch change repaints the drawer even if you did not touch Mobile Menu config. Test the drawer after every swatch change.
• Templates — the active Mobile Nav template (id 3 on staging) wraps whatever Mobile Menu config produces. Switching templates can change the drawer's HTML structure (slide-in from right vs left, full-screen vs partial-cover). The fields you set here get re-arranged into whichever template shape is active.
• Styles & Layouts — typography, button radius, padding, and the body font flow into the drawer. Tune those in Styles & Layouts; the drawer inherits them. Changing the Body font in Styles & Layouts changes the drawer's nav font too.
• Custom CSS — for drawer rules this panel cannot express (per-template hover states, breakpoint-specific opacity, animation curves), write them in Appearance → Custom CSS and target .site-mobile-menu.
• Media Library — the drawer has no logo slot of its own; it inherits the Theme's logo. Upload a wordmark that reads at small sizes (recommended: 240×60 transparent PNG, under 30 KB).
• Custom Codes — analytics on drawer-specific clicks (e.g. tracking the CTA tap rate) belongs in Custom Codes, not the drawer's CTA URL. Use a Custom Codes script with a click handler scoped to .site-mobile-menu .btn-cta.

Before you start

• Admin access with Appearance permissions — you are signed in to SGEN.
• A menu with "Mobile Menu" ticked — the drawer is empty until at least one menu has that location set in Appearance → Menu. Build the menu first if needed.
• CTA URL ready — have your destination path (/shop, /events/...) to hand before opening the form.
• Search index populated — if you plan to enable search, confirm your site search is working under Settings → Search first. An empty index produces a blank results page.
• Social URLs set — if you plan to enable social icons, add them under Settings → Social Profiles first. The drawer reads from that config.

Where to go

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

The Mobile Menu tab is the third tab in the Theme Editor bar. Click it to land on the drawer-feature panel — the form below the bar swaps from the Header / Footer layout to the simpler Mobile Menu layout.

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 — but clear both, otherwise an empty URL keeps a clickable button with no label.

For your business, the populated values look like:

The CTA picks up --color-primary from your active swatch, so a swatch change repaints the button. Use Styles & Layouts → Button Styles to change the button shape (radius, padding, hover behaviour) — those edits cascade into the drawer's CTA automatically. There is no separate "drawer CTA shape" control.

2. Toggle drawer features

• Search box — shows an input at the top of the drawer. Targets your site search; useful for keyword-shoppers (tote bag, t-shirt, sticker).
• Social icons — appends Instagram / X / YouTube / Pinterest tap targets at the bottom. Reads URLs from Settings → Social Profiles.
• Animation — pick slide-in (default; from the right edge), fade-in (cross-fade), or overlay (covers instantly).

Each toggle is a separate save field, so the save-flash names them individually after the click — mobile_show_search, mobile_social_icons, mobile_animation. If a toggle reads off but its behaviour is on (or vice versa), see the troubleshooting note below.

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. There is no Mobile Menu picker on this panel — the location-tick on the Menu panel side is the source of truth. If two menus both have "Mobile Menu" ticked, the most recently saved one wins.

Most teams build a dedicated "Mobile Navigation" menu (5–7 items) separate from the desktop "Main Navigation" (10–14 items). See the two-menu pattern in Example 5.

4. Save Changes

The new drawer renders on every public page on next load. Hard-reload (Ctrl+Shift+R / Cmd+Shift+R) once if your CDN cached the previous markup — the swap is otherwise immediate. On iPhone Safari specifically, pull the page down twice to refresh through the aggressive iOS cache.

What success looks like

• Drawer opens on phone — tap the hamburger at ≤767 px. The drawer opens with your new CTA, toggles, and nav list.
• CTA shows your text and routes to your URL — the button appears above the nav list and links correctly.
• Toggles reflect their saved state — search input (if on) sits above the CTA; social row (if on) sits at the bottom with icons in the order set in Settings → Social Profiles.
• Desktop header is unaffected — open the same site at full width; the header looks exactly as before.
• Reopening the panel shows your saved values — every field reads back, every toggle is in its saved position. The save-flash banner named the fields that wrote (mobile_cta, mobile_show_search, mobile_social_icons, mobile_animation).

What to do if it does not work

• The drawer is empty of links. No menu has "Mobile Menu" ticked. Go to Appearance → Menu, open a menu, tick "Mobile Menu" as its location, and save.
• The CTA is missing. Both text and URL must be set — an empty URL hides the button. If both are populated, hard-reload the public page (Ctrl+Shift+R). On iPhone Safari, pull to refresh twice; stubborn caches clear when you close and reopen the tab.
• The drawer's palette is wrong. The drawer inherits --color-background / --color-text from the active swatch. Swap the swatch under Themes first; fall back to a Custom CSS rule on .site-mobile-menu only when no swatch works.
• A toggle reads off but the behaviour is still on. Known display-only quirk on re-render. The public site is always driven by the saved state. Save once with your intended state, then reopen the panel — the toggle reads correctly.
• The drawer animation feels slow. The default slide-in is 280 ms. Tighten it with .site-mobile-menu { transition-duration: .18s; } in Appearance → Custom CSS without changing the panel pick.
• The hamburger icon does not open the drawer. That is a Header issue, not a Mobile Menu one. Check Theme Editor → Header — confirm the hamburger is enabled at mobile breakpoints and re-save.
• Search results are empty. The drawer's search input is a query frontend only — it does not maintain its own index. Fix the index under Settings → Search (re-index, confirm content is published).
• The drawer covers the page but will not scroll. A Custom CSS rule is breaking the body-scroll-lock. Confirm overflow-y: auto is set on .site-mobile-menu and remove any inherited overflow: hidden from a parent rule.
• Social row is cut off on Android. Replace 100vh with height: 100dvh on the drawer wrapper in Appearance → Custom CSS — this respects the URL bar's collapse animation.

Next step

• Pick a theme (color swatches + 8 chrome slots)
• Configure the header (logo, nav, CTAs)
• Configure the footer (columns + widgets)
• Customize global styles (typography, colors, buttons, layout, accessibility)
• Build a navigation menu (menu builder + locations)
• Manage widgets (paragraph, image, embed, code)
• Use shortcodes (SGEN Documentation etc.)