Key takeaways
- The mobile menu uses the same navigation as desktop by default.
- Mobile menu appearance settings are in Theme Editor > Header section.
- You can change the hamburger icon style and drawer behaviour in the Theme Editor.
- For a completely different mobile navigation (different links or layout), you need code or Fudge.
To change the mobile menu in Shopify, edit its links in Online Store > Navigation > Main menu, and its icon, drawer style and toggles in Online Store > Themes > Customize > Header. Desktop and mobile share the same menu unless your theme lets you assign a separate one.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also build Fudge, the AI operator for Shopify stores, with a 4.9 rating on the Shopify App Store.
How to change mobile menu settings in the Theme Editor
The mobile menu appearance is configured in the Theme Editor, not the Navigation section.
Step 1. Go to Online Store > Themes > Customize.
Step 2. In the left sidebar, click on the Header section.
Step 3. Look for settings related to the mobile menu. Depending on your theme, you may see:
- Menu icon style - hamburger (three lines) vs X icon, icon size
- Mobile menu type - drawer (slides in from the left) vs overlay (covers the full screen)
- Show social media links in mobile menu - toggle
- Show country/language selector in mobile menu - toggle
- A mobile menu setting where you can assign a specific menu to use on mobile (some themes)
Step 4. Make your changes and save.
Mobile menu links - same as desktop by default
By default, Shopify uses the Main menu for both desktop and mobile navigation. Any changes you make in Online Store > Navigation > Main menu apply to both.
This is fine for most stores. If you want the same links in a different order on mobile, or different links entirely on mobile, you need to either:
- Assign a different menu to the mobile navigation (if your theme supports it)
- Use code to conditionally show different content
For adding, renaming and nesting the links themselves, see how to edit navigation menus in Shopify.
How to assign a different menu to mobile
Some themes (particularly premium themes) let you assign a separate menu to mobile navigation in the Theme Editor’s Header settings. If you see a “Mobile menu” or “Secondary menu” option in the Header section that accepts a menu handle, you can:
- Create a new menu in Online Store > Navigation (e.g., “Mobile navigation”)
- Build the links you want specifically for mobile
- Assign this new menu in the Theme Editor > Header > mobile menu setting
If your theme doesn’t expose this option, creating a mobile-specific navigation requires code changes.
Editing the mobile menu appearance with code
For deeper customisation - custom drawer width, different font sizes on mobile, a sticky mobile header with custom icons, a bottom navigation bar on mobile - you need to edit the theme’s header Liquid and CSS files.
Common mobile menu customisations done via code:
- Bottom tab bar navigation - a fixed bottom bar with icons for Home, Shop, Search, Cart, Account
- Full-screen overlay with centered links and large text
- Custom close button position or style
- Search bar inside the mobile menu drawer
- Quick access links at the top of the mobile drawer (Account, Track Order, etc.)
Fudge, the AI operator for Shopify stores, makes these changes from a plain-English description in its store editor: “Add a bottom navigation bar on mobile with icons for Home, Collections, Search, and Cart. It should stick to the bottom of the screen.” Fudge writes the header code as a draft, so you can try the new navigation on your phone before publishing. Small tap targets and layouts that break on small screens are also among the things it checks when you ask it to find where mobile shoppers drop off.
The hamburger icon - what it is and how to change it
The hamburger icon (three horizontal lines) is the button that opens the mobile menu. In the Theme Editor > Header, you may be able to:
- Change its size
- Change whether it shows a text label (“Menu”) next to it
- Change its colour (often inherited from header text colour)
For a completely custom icon - an SVG icon, a different symbol, or a custom animation - that requires editing the header Liquid template.
Mobile menu and page speed
The mobile menu is often loaded in the page HTML even when it’s not open (it’s just hidden with CSS). This means the menu content doesn’t significantly impact page load speed. However, apps that add menu functionality can add JavaScript that does affect performance.
If you’ve noticed mobile menu slowness after installing a navigation app, check if the app’s script is deferrable. Most app developers can advise on this.
For menu links that are hard to tap, see how to make Shopify buttons more tap-friendly.
Testing your mobile menu
After making changes, always test on an actual mobile device - not just by resizing your browser window. Browser resizing doesn’t accurately simulate touch events, font rendering, or the real mobile viewport.
Use Chrome DevTools mobile emulation as a quick check, then verify on a real iOS and Android device before considering the change done.
FAQ
Why doesn't my Shopify mobile menu show the same links as desktop?
Some themes (often premium ones) let you assign separate Main and Mobile menus in Header settings. If you've assigned a different menu to the mobile slot, it'll diverge from desktop. Check Theme Editor → Header for a "Mobile menu" or "Secondary menu" picker, and align it with the main menu if you want them identical.
Can I make the mobile menu open on hover instead of tap?
No. Touch devices don't support hover events the way mouse devices do — there's no consistent "hover" state on a finger tap. The mobile menu has to be tap-to-open. iOS does emulate hover for some interactions, but it's unreliable for navigation.
How do I add icons next to mobile menu items?
The Shopify Navigation editor only handles plain text — icons require code. Describe it to Fudge ("add Lucide icons next to mobile menu items based on their handle") and it edits the header Liquid to render an SVG per menu item conditional on URL or handle. Manual: write a condition in the header Liquid that picks an icon by each link's URL or title.
Should I include a search bar in the mobile menu drawer?
Yes for stores with 30+ SKUs — search drives a meaningful share of mobile sessions on product-heavy stores. For curated brands with under ~30 SKUs, search adds clutter without payback. If shoppers search a lot, keep search visible in the header; otherwise put it inside the drawer to keep the header uncluttered.
Can I add the customer account link to the mobile menu?
Most modern themes include Account/Login links in the mobile drawer automatically when customer accounts are enabled (Settings → Customer accounts). If yours doesn't, add the link manually via Online Store → Navigation → Main menu (or your mobile menu) and add /account as the URL.
