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.
On mobile, most Shopify themes collapse the header navigation into a hamburger menu that opens a drawer or overlay. Here’s how to customise it.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 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
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.)
Describe what you want to Fudge: “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 generates the code and shows a draft before publishing.
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.
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.
