Menu hamburger disappear on click (mobile) and one line menu desktop

Shopify Discussion

Topic summary

A Shopify store owner is experiencing two menu-related issues:

Mobile Problem:

  • The hamburger menu icon (three dotted lines) disappears when clicked, which is undesired behavior
  • The icon should remain visible even when the menu drawer is open

Desktop Problem:

  • Menu items are displaying across multiple lines instead of staying in a single horizontal line

Attempted Solutions:

  • One user provided CSS code targeting the hamburger icon visibility using details selectors and !important flags
  • Instructions included adding the code via Theme Settings → Custom CSS or directly editing base.css
  • The original poster tried a solution from another community thread but reported no success
  • The provided CSS fix also did not resolve the issues

Current Status:

  • Both problems remain unresolved
  • The store owner has offered to provide collaborative access to directly fix the menu issues
  • Store URL and password were shared for troubleshooting purposes
Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

https://kashco-interiors.myshopify.com/?_ab=0&_fd=0&_sc=1

the 3 dotted lines it disappears upon click in mobile version which I don’t want.

desktop: menu should be one line kindly. How can we fix this

Can someone help me fix this ? password: kashco

2

@kashco

details:not([open]) > .header__icon--menu .icon-close, details[open] > .header__icon--menu .icon-hamburger {
    visibility: visible!important;
    opacity: 1!important;
    
}

How to Add This to Shopify Dawn Theme:

  1. Go to Shopify Admin → Online Store → Themes.
  2. Click “Customize” on your Dawn theme.
  3. In the theme editor, go to “Theme settings” (bottom left).
  4. Scroll down and click “Custom CSS”.
  5. Paste the above CSS code and save changes.

Alternative (Edit Theme CSS Directly):

  1. Go to “Online Store” → “Themes”.
  2. Click “Actions” → “Edit code”.
  3. Open base.css inside the assets folder.
  4. Paste the CSS at the bottom and Save.

It will show when drawer open after click

3

https://community.shopify.com/post/2361892

I tried this but no luck.

4

No your solution also doesn’t help sir. Can I provide collaborative access just to fix this menu please.