Change the Mobile Menu in Shopify (2026)

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.

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.

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

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.

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.

Want a custom mobile navigation? Describe it to Fudge.

Try Fudge for Free

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.

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.

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. Fastest path: 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: tag your menu items and write the conditional rendering yourself.

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. Keep it inside the drawer rather than always-visible to avoid header crowding.

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.