Menu doesn't work on mobile

Store Design
1

Hi all,

Using dawn theme, the menu doesn’t work on mobile. It seems to open a grey box, but nothjing else, it works fine on desktop.
I’ve read other posts and checked text colour etc, but nothing seems to work.
Any advice much appreciated.
I’m okay messign with code, but please give clear instruction. Need all the help i can get, but i’m not the brightest button! LOL!
Thank you

2

Hey @ThePartyFactoryUK

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
div#menu-drawer {
    transform: unset !important;
    visibility: visible !important;
}
</style>

RESULT:

image
image351×760 43.5 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

You’re amazing! Thankyou

4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed

5

hhmm, unfortunately the menu now shows but non of the links work and drop downs dont open

6

Pretty weird, do you mind sharing your collaborator request code in my private messages so I can have a detailed look and sort that out?

Best,
Moeed

7

how do i do that please?

8

To get the collaborator code, you’ll have to go into your Shopify Settings > Users > Security > Copy the 4 digit code. Click on my profile and you’ll see an option to send a private message.

Best,
Moeed

9

go to Theme settings, Colors, and temporarily switch the header color scheme to something high contrast like the default light scheme. Save, refresh on your phone, tap the menu again. If the menu suddenly shows up, you’ve basically confirmed it’s just a color scheme issue, meaning your menu text is likely the same color as the drawer background.

If changing the color scheme doesn’t fix it, then it’s usually a CSS or JS tweak that broke the drawer layering.

Go to Online Store, Themes, Edit code, open assets base.css and scroll to the very bottom and paste this:

.menu-drawer {
  background: rgb(var(--color-background)) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 9999 !important;
}

.menu-drawer__menu-item,
.menu-drawer__menu-item span,
.menu-drawer__close-button,
.menu-drawer__account {
  color: rgb(var(--color-foreground)) !important;
  opacity: 1 !important;
}
10

Thank you but that hasn’t helped, the menu still don’t work on mobile

11

It’s a frequent problem with broken page HTML.
Your layout file should start with:

Instead it has this:

<head>
<!-- Google Tag Manager -->
 <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-TPHKV29S');</script>
<!-- End Google Tag Manager -->
  
        <meta charset="utf-8">

When someone was adding GTM tag, the top 2 lines were removed.

Dawn theme requires no-js class (which is then replaced by js – kinda test to see if Javascript is enabled) on the <html> element for some CSS to work properly.

People tend to recommend fixing the symptom with more CSS, not the cause.

Fix this and do not meddle with other code (and undo whatever CSS “fixes” were added).
If it’s broken beyond easy repair, just restore from the previous theme copy.

Similar to My mobile menu just shows a dark box with nothing in it. Can anyone please help me fix it? Thank you! - #7 by tim_1

12

Some Custom CSS you added in base.css file causes the issue.