main menu button not working when clicked on mobile

Store Design
, ,

Topic summary

A mobile header menu button (three stripes/hamburger icon) fails to open the navigation menu when clicked, though the header displays correctly otherwise.

Troubleshooting attempts:

  • Initial CSS fix suggested adding visibility and transform properties to #menu-drawer.menu-opening in base.css
  • User reported the fix didn’t work initially, later revealed they removed the code
  • Developer identified syntax errors in user’s CSS implementation

Current solution:

  • Add specific markup code before </body> tag in theme.liquid file
  • Update accompanying CSS styling

Status: Partially resolved - menu now appears but only shows halfway and doesn’t display the button properly. Further CSS adjustments needed to complete the fix.

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

everything on my header looks fine but when i click on the 3 stripes (menu) on my phone nothing is showing up.

my store: https://795000-4b.myshopify.com/

2

Hello @dodo06 ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

.menu-opening #menu-drawer {
    transform: translateX(0%) !important;
    visibility: visible;
}

Thanks

3

unfortunately it did not work

4

I checked the source code and find you are not using the css code I provided.

5

im sorry i deleted it after it didnt work let me put it in again

6

There is syntax error in your css.
Sorry but seems you know nothing about code.
Please revert that code and follow these instructions:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.liquid , now here search for
    Once found just before to it add this code
7

it worked but the menu is just showing halfway and not the the buttom

8

Update the css
9

legend