Change hamburger menu to text “MENU” only on mobile devices

Store Design
, , , , ,

Topic summary

A user wants to replace the hamburger menu icon with the text “MENU” on mobile devices only in the Dawn theme, while keeping the same functionality.

Solutions Provided:

  • ZestardTech’s approach: Add CSS code to base.css that uses ::before pseudo-element with content: "MENU" and hides the hamburger SVG icon, targeting screens max-width 992px.

  • PageFly-Oliver’s method: Insert code at the bottom of theme.liquid file (specific code details were garbled in the conversation).

  • Dan-From-Ryviu’s solution: Add CSS code before the </head> tag in theme.liquid (specific implementation details unclear).

Additional Request:

The user followed up asking how to move the search bar into the mobile menu and position it above the menu items. This secondary question remains unanswered.

Status: Initial problem has multiple proposed solutions; follow-up question about search bar placement is still open.

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

Using the latest DAWN theme, I want to change the hamburger menu to a functional text “MENU” that works exactly like the hamburger menu.

Here’s what it looks like:

IMG_5973.jpeg
IMG_5973.jpeg1125×368 27.4 KB

What I want it to look like:

IMG_5974.jpeg
IMG_5974.jpeg1125×338 16.9 KB

Store URL: shopbreakthrough.com

1 Like
2

Hi @thevergreenlana

Do you want it look like this?

Screenshot 2023-09-28 at 15.14.54.png
Screenshot 2023-09-28 at 15.14.54.png393×377 22.3 KB

3

Hi @thevergreenlana ,

You can try this code by following these steps:

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

Step 2: Search file theme.liquid

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

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

4

Yes please, and want it to not be present on the desktop version and be functional like the hamburger menu, thank you so much!

5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Layout > base.css and paste this at the bottom of the file:
@media screen and (max-width: 992px){
.header__icon.header__icon--menu::before {
content: "MENU";
font-weight: bold;
margin-right: 5px;
text-underline-offset: none;
text-decoration: none!important;
}
svg.icon.icon-hamburger {
display: none;
}
details#Details-menu-drawer-container {
margin-top: 10px;
}
}

ZestardTech_0-1695892696379.png
ZestardTech_0-1695892696379.png1156×846 73.8 KB

6

Hi @thevergreenlana

Please add this code to your theme.liquid file before tag
7

Thanks so much - Is there a way to move the search bar (on mobile view) and add it as a search bar inside the menu? Would be very helpful!! Cheers!

8

Thanks so much - Is there a way to move the search bar (on mobile view) and add it as a search bar inside the menu? Would be very helpful!! Cheers!