How can I replace the hamburger icon in my Dawn theme?

Store Design
, , , , , ,

Topic summary

A user seeks to replace the default hamburger menu icon in their Dawn theme Shopify store with a custom image.

Initial Request:

  • User wants to swap the hamburger icon with a specific custom image (referenced via upload link)
  • Site URL provided: milkymotorsports.com

Solution Provided:
A community member (Dan-From-Ryviu) offers step-by-step guidance:

  1. Navigate to Online Store > Themes > Edit Code
  2. Open the icon-hamburger.liquid file
  3. Replace existing code with custom markup (code snippet provided but appears corrupted/reversed in the conversation)

Follow-up Requests:

  • User asks for code to implement a checkerboard pattern icon as well
  • Additional code provided for the icon-hamburger.liquid file
  • User requests CSS to make the icon 1.5x larger on mobile
  • CSS solution provided targeting .header__icon.menu--icon with 36px width/height dimensions

Status: The discussion appears resolved with complete code solutions provided for custom icon replacement and mobile sizing adjustments.

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

@Dan-From-Ryviu can you provide code to make the icon 1.5x bigger on mobile?

https://milkymotorsports.com/