Mobile Header
A simple, non-technical guide to the Mobile Header of your theme — what shoppers see at the top of your store on phones and small screens. This guide also covers the Mobile Navigation Drawer (the slide-out menu) and the Mobile Mega Menus.
Note
️ This theme uses separate sections for desktop and mobile. This document covers the mobile experience. For computers, see desktop-header.md.
1. What is the Mobile Header?
The Mobile Header is the compact top bar shown on phones. To save space, the full menu is hidden behind a hamburger icon (the ☰ three-lines button). The typical layout is:
- Left: the hamburger (☰) button that opens the menu
- Center: your logo
- Right: search, account, and cart icons (plus an optional light/dark switch)
Tapping the hamburger slides open a navigation drawer from the side, where shoppers browse your full menu — including nested submenus and mobile mega menus.
2. Key Features at a Glance
- ✅ Hamburger menu — keeps the header clean; full navigation lives in a slide-out drawer.
- ✅ Centered logo with its own mobile logo width setting.
- ✅ Search, account, and cart icons sized for touch.
- ✅ Two ways to show submenus — accordion (expand in place) or tabs (slide to a new panel).
- ✅ Mobile mega menus — rich panels with tabs and product/collection sliders, adapted for phones.
- ✅ Drawer footer — optional social icons and a country/language selector.
- ✅ Sticky header — keep it visible on scroll, or reveal it only when scrolling up.
- ✅ Transparent header — overlay it on a hero image at the top of a page.
- ✅ Light & dark mode colors.
3. Where to Find It in the Theme Editor
On a phone-sized preview:
- Go to Online Store → Themes → Customize.
- Switch the editor preview to mobile (the phone icon at the top) so you can see your changes.
- Open the Header group and click Mobile Header.
- The drawer itself is a separate section in the same group: Mobile navigation drawer.
4. Mobile Header — Customization Options
| Setting | What it does |
|---|---|
| Sticky header | None, On scroll up (hides as you scroll down, reappears scrolling up), or Always (stays at top). |
| Header width | Wide (edge-to-edge) or Narrow (a contained, floating style). |
| Border radius (Narrow only) | Rounds the corners of the floating header. |
| Overlap content on [page type] (Narrow only)* | Lets the header float over the top of a page (Home, Collection, Product, Collections list, Blog, Blog post). |
| Header transparency (Wide only) | Overlay the header on the first section per page type, with its own transparent content color (light/dark) and transparent logos. |
| Logo / Dark logo | Your logo images for light and dark mode. |
| Logo width | The logo size on mobile (50–200 pixels), separate from the desktop logo width. |
| Search icon | Show or hide the search icon. |
| Account icon | Show or hide the account icon (needs customer accounts enabled). |
| Padding (top/bottom) | Space above and below the header content on mobile. |
| Colors (light & dark) | Background, content (text/icon), and border colors for each mode. |
Note
️ The cart icon is always shown on mobile so shoppers can always reach their cart.
5. The Mobile Navigation Drawer (Slide-out Menu)
Tapping the hamburger opens the Mobile navigation drawer — a panel that slides in over the page with a dimmed background behind it. Tapping the ✕, the dim background, or pressing back closes it.
Drawer settings
Found under the Mobile navigation drawer section:
| Setting | What it does |
|---|---|
| Title | The heading at the top of the drawer (default "Menu"). |
| Menu | Which Shopify navigation menu the drawer displays (default is your main menu). |
| Default display mode | How submenus behave? Accordion or Tabs (explained below). |
| Slide duration | How fast panels slide in/out (in milliseconds). |
| Social icons | Optionally show your social media icons in the drawer footer (uses your global social links). |
| Country selector | Optionally show a country/region selector in the footer (with optional flag). |
| Language selector | Optionally show a language selector in the footer. |
| Colors (light & dark) | Drawer background and text colors for each mode. |
| Custom menu items (blocks) | Add up to 50 custom links, each with an optional image and badge, shown above your regular menu links. |
How submenus work — two modes
When a menu item has child links, the drawer can reveal them in one of two ways (set by Default display mode):
- Accordion mode — tapping a parent item expands its children right below it, in place (like a folding list). Tap again to collapse. A "View all" link is included so shoppers can still visit the parent page.
- Tabs mode — tapping a parent slides in a new panel showing its children, with a back button to return. This keeps each level clean and is great for deep menus.
Both modes support multiple levels of nesting (Shopify supports up to three levels of submenus).
What's in the drawer footer
At the bottom of the drawer you can optionally show:
- Social media icons (from your global social links)
- A country/region selector and/or language selector
Note
️ Account links are not in the drawer footer. On mobile, shoppers reach their account through the account icon in the header, not the drawer.
6. Mobile Mega Menus
Just like on desktop, this theme offers rich mega-menu panels for mobile, in four styles:
| Mobile mega menu type | What it shows |
|---|---|
| Tabbed columns | Tabs that switch between sets of links/cards. |
| Content cards | Tabbed cards with images, links, products, or promos. |
| Product showcase | Category tabs with a sliding row of featured products. |
| Store locator | A store/address panel and contact details. |
How a mobile mega menu connects to a menu item — important!
Exactly like desktop, a mobile mega menu attaches to a menu item by matching its name. Each mobile mega-menu section has a "Menu link title" field; it must exactly match a top-level item in your drawer menu.
Example: If your menu has "Shop", set the mobile mega-menu section's Menu link title to "Shop". Now tapping "Shop" in the drawer opens that mega panel instead of a plain list.
Warning
️ If the names don't match exactly, the menu item falls back to the normal accordion/tabs list of its sub-links. A name mismatch is the most common reason a mobile mega menu "isn't showing."
Inside, mobile mega menus use tabs and horizontal sliders of product/collection cards, designed to be easy to swipe on a phone.
7. Search, Account & Cart on Mobile
- Search — the search icon opens a search box with live suggestions as the shopper types.
- Account — the account icon links to login/account (only when customer accounts are enabled and the icon is turned on).
- Cart — the cart icon shows a live item count and opens the same slide-out cart drawer as desktop, including the free-shipping progress bar and upsells.
8. The Announcement Bar on Mobile
The Announcement Bar appears above the mobile header too. On phones it uses its own mobile slider settings (speed, direction, timing) so it can behave differently than on desktop. Coupon codes and countdown timers work on mobile, but the side info clusters (email/phone/country-language) are desktop-only. See announcement-bar.md for full details.
9. Desktop vs. Mobile
- The Mobile Header replaces the desktop header on small screens automatically — you don't switch it manually.
- It reuses your logo and the same Shopify menus, but layout, logo width, sticky/transparency, and the mega-menu experience are configured in the mobile sections.
- The full menu lives in the slide-out drawer instead of being shown across the top.
10. Things to Know (Dependencies & Limits)
- Mobile mega menus require an exact name match between the section's "Menu link title" and a top-level drawer menu item.
- Account links are not in the drawer — only the header account icon (which needs customer accounts enabled).
- Social icons use your global social media links; if they're empty, nothing shows.
- Country/language selectors require Shopify Markets / translations to be set up.
- Dark mode colors only matter if dark mode is enabled.
- Transparency is for the Wide header; floating overlap is for the Narrow header — not both at once.
- Up to 50 custom menu-item blocks in the drawer.
- Some settings appear/disappear based on other choices (e.g. border-radius only on Narrow). This is expected.
11. Best Practices
- ✅ Always preview on mobile in the editor (phone icon) when editing these settings.
- ✅ Keep the logo a sensible mobile size so it doesn't crowd the icons — use the separate mobile logo width.
- ✅ Choose the right submenu mode: use Accordion for short, simple menus; use Tabs for deep, multi-level menus.
- ✅ Match mobile mega-menu titles exactly to your menu items (copy/paste the name).
- ✅ Don't overload the drawer footer — a few social icons and one selector is plenty.
- ✅ Test the hamburger, drawer scrolling, and back buttons on a real phone before launch.
12. Common Questions & Troubleshooting
Q: The hamburger menu doesn't open. Confirm the Mobile navigation drawer section is present in the Header group. Test on the live store or a real device if the editor preview behaves oddly.
Q: My mobile mega menu shows as a plain list instead of the rich panel. The mega-menu section's Menu link title must exactly match the menu item's name. Fix the name to connect them.
Q: I can't find the account link in the drawer. That's by design — the account link is the icon in the header, not in the drawer. Make sure customer accounts are enabled and the account icon is on.
Q: My social icons aren't in the drawer. Turn on Social icons in the drawer settings and make sure your social links are filled in under your global theme/social settings.
Q: A setting disappeared. Many options show only when a related one is enabled (e.g., border-radius appears only on Narrow width). Re-check the related toggle.
Q: The logo is too big/small on phones. Adjust the Logo width in the Mobile Header — it's separate from the desktop logo width.
Q: Submenus open differently than I expected. Switch the Default display mode between Accordion (expand in place) and Tabs (slide to a new panel) to get the behavior you want.
13. Summary
The Mobile Header gives phone shoppers a clean, touch-friendly top bar: a hamburger menu, a centered logo, and search/account/cart icons. Behind the hamburger, the navigation drawer holds your full menu with either accordion or tabs submenus, plus an optional footer with social icons and a country/language selector.
You can also build mobile mega menus that attach to menu items by matching names, make the header sticky or transparent, and control light/dark colors.
Key reminders: preview on mobile, match mega-menu titles exactly, and remember the account link lives in the header icon, not the drawer. Get those right and your mobile navigation will feel smooth and professional.