Remove hamburger menu from desktop and mobile. Dawn Theme version 11

Technical Q&A
, ,

Topic summary

A user wants to remove the hamburger menu icon from both desktop and mobile views in Shopify’s Dawn Theme (version 11), replacing it with a horizontal text menu across all devices.

Solution Provided:

  • Navigate to Online Store → Theme → Edit Code
  • Locate the base.css file
  • Add CSS code at the bottom: svg.icon.icon-hamburger { display: none !important; }
  • Save the file

Status: The original poster confirmed the solution worked perfectly.

Follow-up Questions:

  • Another user asked if this approach works for the Debut theme (couldn’t find the specified file)
  • A third user inquired about implementing the same desktop menu on mobile
Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

I would like to remove the hamburger menu and only have a horizontal text menu on both my desktop and mobile. I tried all the CSS code suggestions for either theme.liquid or base.css suggestions.

Any help would be appreciated.

My site is URL is:

https://ec6bc3-2.myshopify.com/

PW:

eawhup

daved1234_0-1691014264153.png
daved1234_0-1691014264153.png736×257 160 KB

daved1234_1-1691014300155.png
daved1234_1-1691014300155.png911×169 37.5 KB

2

HI @daved1234

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

svg.icon.icon-hamburger {

display: none !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Thank you so much! Worked perfect!

1 Like
4

You are welcome @daved1234 :wink:

5

Hello, will this work with Debut Theme as I don’t see that file under edit code

thank you

6

hey, was it solved? as even i want main desktop menu as mobile menu.