How to change three vertical lines menu to the image I have attached

Store Design
, ,

Topic summary

A user wants to replace the standard three-line hamburger menu icon with custom text (specifically “MENU”) on their mobile site, similar to the design on swawe.store.

Solution Provided:

  • Access the theme code editor (Online Store > Theme > Edit Code)
  • Locate the main CSS file (base.css, theme.css, custom.css, or styles.css)
  • Add custom CSS targeting the mobile menu drawer (max-width: 989px)
  • The code hides the existing SVG icon and uses CSS ::after pseudo-element to insert “MENU” text
  • Styling includes: bold font weight, 1.75rem size, absolute positioning with 30px left offset

Status: The solution appears complete with working code provided. The responder included a screenshot showing the expected result and requested the user mark it as an accepted solution if helpful.

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

I want a text menu written on menu section like this site on my website https://swawe.store/

IMG_8073 2.jpg
IMG_8073 2.jpg1170×1698 200 KB

2

Hi @attackon ,

You can follow these steps to change the three vertical lines menu to the text

  1. Open Online Store > Theme > Edit Code

  2. Find and open base.css (or theme.css, custom.css, styles.css)

  3. Paste the code snippet below to the bottom of the file and hit save

@media (max-width: 989px) {
    #Details-menu-drawer-container summary span svg {
        visibility: hidden;
    }
    
    #Details-menu-drawer-container summary span::after {
        content: "MENU";
        position: absolute;
        left: 30px;
        font-family: var(--font-body-family);
        font-weight: bold;
        font-size: 1.75rem;
    }
}

Here is the result

BSSTekLabs_0-1719054925148.png
BSSTekLabs_0-1719054925148.png848×1484 119 KB

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!