Fixing the Sticky Shopify Hamburger Icon: A Community Guide to Custom Mobile Menus

Hey everyone,

It’s always fascinating to dive into the Shopify community forums, isn’t it? You find real store owners grappling with real-world problems, and often, the solutions shared by fellow merchants or experts are pure gold. Recently, I stumbled upon a thread that perfectly highlights this – a common head-scratcher about the mobile menu hamburger icon on the popular Dawn theme.

Our friend, cyberfenix, kicked things off with a familiar frustration: their hamburger icon was still showing even after the mobile menu had expanded. If you’ve ever had this happen, you know it can make your site look a little… well, clunky. You want that clean ‘X’ to appear, signaling the menu is open and ready to be closed, not the original three lines still hanging around.

The Initial Fix: Hiding the Persistent Icon

The ever-helpful Moeed jumped in almost immediately with a direct fix. It turns out, this particular issue often comes down to a specific CSS class that needs a gentle nudge to disappear when the menu is active. Moeed’s solution involved adding a small snippet of CSS code to the theme.liquid file. This code specifically targets the hamburger icon when the menu is in its 'expanded' state (aria-expanded="true") and tells it to vanish.

Here’s the code Moeed shared to tackle that pesky persistent icon:

You’d typically place this right before the tag in your theme.liquid file. This snippet is essentially saying, "Hey, when the menu button (.header__icon--menu) is expanded, hide any SVG icon within it that has both the .icon and .icon-er classes." The !important is there to make sure it overrides any other styles trying to keep it visible.

Moeed even shared a screenshot of the result, showing a clean menu state:

Leveling Up: Swapping for a Custom Hamburger Icon

But cyberfenix wasn't just looking for a fix; they wanted to personalize it further. "What if I want to replace the three-line hamburger icon with a design of my own?" they asked. This is where things get really interesting for store owners who want to inject more brand personality into their navigation.

Moeed had an excellent solution for this too, involving a bit more CSS and the Shopify Files section:

1. Upload Your Icon: First, you’ll need your custom icon. Make sure it's an SVG or PNG. Head over to Content > Files in your Shopify admin, upload your icon, and copy its link. Keep that link handy!
2. Add Custom CSS: Go back to your theme.liquid file. Just like before, you’ll paste this code above the tag:

3. Insert Your Link: Replace PASTE-YOUR-LINK-HERE with the icon link you copied earlier.
4. Save and Test: Save your changes and check your site. This code hides the default .icon-hamburger and then uses your uploaded image as a background for the menu button when it's *not* expanded. When the menu opens, your custom icon hides, and the standard 'X' (or whatever your theme uses for closing) should appear. Moeed even offered to help adjust sizing or positioning if it looked off, which is a testament to the community spirit!

Decoding the 'icon-er' Mystery: Renaming for Cleaner Code

A curious detail emerged during the discussion: the original icon was identified as icon-er, not the more standard icon-hamburger. cyberfenix had a bit of a challenge trying to rename it, as they saw an SVG file rather than editable code. This is a common hurdle when you're digging into theme files!

Moeed clarified that while the initial fix worked fine with icon-er, renaming it to icon-hamburger could lead to cleaner integration, especially since the Dawn theme often has built-in logic to handle .icon-hamburger automatically. Here’s how he advised tackling that renaming, even if you can't open the SVG directly:

1. Access Theme Code: Go to Online Store > Themes > Actions (the three dots) > Edit code.
2. Search for 'icon-er': Use the search bar at the top of the file list. Type in icon-er. Moeed suggested it would likely be found in assets/icon-hamburger.svg or snippets/header-drawer.liquid.
3. Replace the Class: When you find the line that reads class="icon icon-er", you'll need to change it to class="icon icon-hamburger". Important: Moeed specifically warned against using "Replace All" as icon-error might exist elsewhere. Instead, click the small replace icon next to the specific line. If you're looking at the SVG file directly through the Shopify editor, it might not show you the raw code, but the search panel trick can often reveal the underlying HTML/SVG structure where this class is applied.
4. Re-evaluate Custom CSS: Once renamed, Dawn *should* automatically hide the .icon-hamburger when the menu opens. This means you might be able to remove the initial CSS snippet you added to theme.liquid. If it still doesn't hide after renaming, you can keep the custom CSS, but update it to target icon-hamburger instead of icon-er.

This little side-quest of renaming highlights the importance of understanding the specific class names your theme uses. Sometimes, a small deviation can require a custom CSS rule, but aligning with the theme's default naming conventions can simplify things in the long run.

Putting It All Together: Your Action Plan

So, whether you're just looking to hide a stubborn icon or completely overhaul your mobile menu button, the community has laid out a clear path. Here’s a consolidated action plan for your Shopify store:

Option 1: Hide the Persistent Hamburger Icon (if it's icon-er)

If your hamburger icon (identified as icon-er) isn't disappearing when the menu opens:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your current theme (like Dawn), click Actions > Edit code.
3. Open the theme.liquid file.
4. Scroll to the very bottom and paste this code just above the tag:

5. Click Save.

Option 2: Replace Your Hamburger Icon with a Custom Design

If you want to use your own image for the hamburger icon:

1. Upload your custom SVG or PNG icon to Content > Files in your Shopify admin. Copy the generated URL.
2. Go to Online Store > Themes > Actions > Edit code.
3. Open the theme.liquid file.
4. Paste the following code just above the tag:

5. Replace PASTE-YOUR-LINK-HERE with the URL of your uploaded icon.
6. Click Save.
7. Note: If your theme uses icon-er instead of icon-hamburger, you might need to adjust the CSS selector in the first rule (.header__icon--menu svg.icon-hamburger) to .header__icon--menu svg.icon-er or follow the renaming steps below first.

Option 3: Rename 'icon-er' to 'icon-hamburger' for Cleaner Theme Integration

This step is optional but can help standardize your theme's code:

1. Go to Online Store > Themes > Actions > Edit code.
2. Use the search bar (usually at the top of the file list) and type icon-er.
3. Look for results in files like assets/icon-hamburger.svg or snippets/header-drawer.liquid.
4. Carefully locate the line class="icon icon-er".
5. Change it to class="icon icon-hamburger". Important: Do NOT use "Replace All" across your theme. Only modify this specific instance.
6. Click Save.
7. After this, test your menu. If it now hides correctly when expanded, you might be able to remove any custom CSS you added earlier for icon-er.

Remember, whenever you’re diving into your theme’s code, it’s always a good idea to duplicate your theme first as a backup. This way, if anything goes awry, you can easily revert to a working version. It’s a small step that saves a lot of headaches!

The beauty of running your own online store on a platform like Shopify is the incredible flexibility you have to customize it and make it truly your own. And when you hit a snag, there’s usually a helpful community member or an expert like Moeed ready to share their insights. It’s a powerful ecosystem that empowers merchants to build unique and functional stores without needing to be a full-stack developer. If you're thinking of starting your own e-commerce journey, or simply want more control over your existing shop, exploring Shopify's capabilities is always a smart move.

Happy customizing!