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.
To change mobile menu behavior in Shopify, open Online Store > Themes > Customize, switch to the phone preview and select the Header section. Most themes let you set the menu style (drawer or full screen), search placement and a sticky header there without 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. For a full walkthrough of editing mobile menu content and links, see how to change the mobile menu in Shopify.
Menu type — drawer vs. full-screen
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)
If shoppers search a lot, keep search visible in the header; otherwise put it inside the drawer to keep the header uncluttered.
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. Fudge, the AI operator for Shopify stores, can write it for you. Describe the change to its store editor:
“Show a ‘Call Us’ button in the mobile menu that doesn’t appear in the desktop navigation.”
Fudge writes the menu as native code in your theme and saves it as a draft, so you can open the preview on your phone and test it before anything goes live. If shoppers don’t take to it, you can roll the change back in one click.
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. See our guide on making Shopify buttons more tap-friendly for detailed fixes.
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)
If you need a standard dropdown menu first, start with how to create a dropdown menu in Shopify. To hide specific content on mobile rather than changing the menu, see hiding content on mobile in Shopify.
FAQ
Why doesn't my mobile menu close when I tap outside it?
Usually a JavaScript bug in an older theme version, or an installed app interfering with click-outside handlers. Check if your theme has an update available — modern Dawn, Sense, and Refresh handle this correctly. If you've installed a navigation app, temporarily disable it to confirm whether it's the cause.
Can I have a sticky bottom navigation bar like a native app instead of a hamburger?
Few themes include one. One option: describe what you want to Fudge ("add a fixed-bottom mobile nav with Home, Shop, Search, Cart icons, hidden on desktop") and it generates the section as native theme code. The build itself is straightforward - fixed-bottom container, 3-5 icon links, mobile-only via media query - but in most themes it has to be built rather than switched on.
Why aren't my dropdown menus expanding on mobile?
The theme uses hover-based dropdowns that don't translate to touch screens. Modern Shopify themes convert hover dropdowns to tap-to-expand on mobile automatically. If yours doesn't, your theme is older — either update it, or add JavaScript that toggles a "open" class on tap.
How big should mobile menu tap targets be?
Apple recommends at least 44x44 points and Google's Material Design 48x48dp. Cramped menu links cause mis-taps. Increase padding on nav links rather than making the font bigger.
Should I show a search bar in the mobile menu?
For product-heavy stores, yes — many mobile shoppers prefer search over browsing nested menus. For curated brands with under ~30 SKUs, search adds clutter without clear benefit. If shoppers search a lot, keep search visible in the header; otherwise put it inside the drawer to keep the header uncluttered.
