How can I change the hamburger icon svg (menu) for a personalized one in my store?

Topic summary

A user encountered an issue where a custom hamburger menu icon SVG appeared correctly in the theme editor preview but failed to display on the live store. Screenshots showed the icon working in preview mode but missing on actual devices.

Troubleshooting Process:

  • Multiple community members requested the store URL to investigate
  • Initial checks by one helper showed the icon displaying correctly
  • The original poster confirmed it still wasn’t visible on other devices

Resolution:

  • The issue was identified as an incorrect CSS class name in the code
  • Solution: Change the class from icon-hamburger to icon icon-hamburger
  • This fix successfully resolved the display problem

Status: Issue resolved. The custom hamburger icon now displays correctly across all devices.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

Hello good morning, I have tried to change the hamburger icon svg in the code of my store and it seems that the code works well even in the preview it looks good but when I check my store you see absolutely nothing.

There is maybe css conflict issue. Please share store URL as well as passcode so that I provide you solution code.

Hi @Dropstar ,

Can you share your store URL so that I can check for you?

Best,

Daisy

Hi @Dropstar ,

Please send the website link, I will check it for you

https://1oxif6mu92krx253-78857208093.shopifypreview.com

https://1oxif6mu92krx253-78857208093.shopifypreview.com

Hi @Dropstar ,

I checked and it shows fine, did you solve it?

I’ve tried to watch it from another device but I haven’t been able to see anything yet

Hi @Dropstar ,

Please change code here:

icon-hamburger

=>

icon icon-hamburger

That worked, thank you very much, have a good day

Hi @Dropstar ,

You’re welcome and happy to help :blush: