Key takeaways
- Mobile menu behavior is controlled in the Theme Editor under the Header section.
- Common options include hamburger icon style, drawer vs. full-screen menu, and search bar visibility.
- Different menu items on mobile vs. desktop requires custom code or Fudge.
- Always test mobile navigation on a real device — the Theme Editor preview approximates but doesn’t replicate all tap behaviors.
Mobile navigation is one of the most-used elements on your Shopify store. A clunky menu makes it harder for shoppers to find products, which means fewer conversions. The good news is that most themes give you meaningful control over how the mobile menu behaves — without touching code.
How do I change the mobile view on Shopify?
Start with the Theme Editor mobile preview. Go to Online Store → Themes → Customize, then click the phone icon at the top of the editor. Navigate to the Header section in the left sidebar to access mobile menu settings.
What you can change in the Theme Editor
Hamburger icon style
Most themes let you choose between:
- Lines (classic hamburger) — three horizontal lines
- Lines + label (“Menu” text next to the icon)
- Icon variations — some themes offer alternative icon styles
The label option can help users who aren’t familiar with the hamburger icon pattern, especially older audiences.
Menu type — drawer vs. full-screen
This is the most impactful setting:
Drawer menu — slides in from the left (or right) and overlays the content. Popular on most modern Shopify themes. Allows users to see they haven’t left the page.
Full-screen menu — takes over the entire screen when opened. Works well for stores with large navigation trees where you need more space to display all categories.
Look for this setting in Header → Mobile menu style (name varies by theme).
Search bar visibility on mobile
You can often control whether the search bar appears:
- In the mobile header (always visible)
- Inside the drawer/menu (only visible when menu is open)
- Hidden entirely (search only via desktop)
For product-heavy stores, a visible search bar on mobile is worth keeping — many shoppers use search rather than navigation.
Sticky header on mobile
Some themes let you control the header independently for mobile and desktop. A sticky header on mobile keeps your navigation accessible as users scroll. Look for “Sticky header” in the Header section settings.
How do I change the menu style?
Step 1 — Open the Theme Editor. Online Store → Themes → Customize.
Step 2 — Select the Header section. Click “Header” in the left sidebar or click the header area on the canvas.
Step 3 — Browse settings. In the right panel, look for sections labeled “Mobile menu”, “Navigation”, or “Menu”. The exact labels depend on your theme.
Step 4 — Switch to mobile preview. Click the phone icon to see the result in context.
Step 5 — Save.
Changing which links appear on mobile
Shopify uses the same navigation menu for both desktop and mobile by default. If you want different links on mobile — for example, a “Call Us” link on mobile but not desktop, or a simplified category list — you have two options:
Option A — Create a separate mobile menu. Go to Online Store → Navigation → Add menu. Create a “Mobile Navigation” menu with the links you want. Then, in some themes, you can assign this menu specifically to the mobile navigation slot in Header settings.
Not all themes support a separate mobile menu. Check your theme’s documentation.
Option B — Use code or Fudge. For full control over what appears in the mobile menu vs. desktop, custom code is required. Describe what you want to Fudge:
“Show a ‘Call Us’ button in the mobile menu that doesn’t appear in the desktop navigation.”
Fudge generates the code as a draft for your review before anything goes live.
Common mobile menu issues and fixes
Menu doesn’t close when tapping outside. This is a JavaScript behavior issue. Check if your theme has an update available — this is often fixed in newer versions.
Sub-menus not working on mobile. Dropdown menus that rely on hover states don’t work on touch screens. Your theme should convert hover dropdowns to tap-to-expand behavior on mobile. If it doesn’t, this is a theme limitation.
Menu items too small to tap. Tap targets should be at least 44x44px (Apple’s guideline). If menu links feel cramped, check Theme Editor settings for menu item size or font size. CSS can also increase padding on nav links.
Menu overlapping content. Z-index conflict with an app or custom section. Inspect with browser DevTools and increase the z-index on the menu overlay.
When to use a custom mobile navigation
The Theme Editor covers most use cases. Custom code makes sense when you need:
- A bottom navigation bar (like a native app) instead of a hamburger menu
- A tabbed navigation with icons for each category
- Different menu structures per customer group (logged in vs. guest)
These are beyond standard theme customization, but straightforward with Fudge.
