Menu no longer working on Dawn on Mobile phones

[BAFC]

Hi,

The menu on my store is not longer working on mobile. It works fine on desktop.

I updated from version 9.0 as it was not working all of a sudden - to version 11.0. It worked for a few hours and is not working again now?

I left the site as is - with no changes to code etc, so it’s not that causing the issue.

Can someone please advise on what this may be and how to rectify?

Is anyone else experiencing this issue?

The url is: www.bafurnitureclearance.au

Thanks in advance.

Regards

BAFC

[PaulNewton]

If you customized your theme disable those customizations.

If using frontend affecting apps disable those apps.

Test in a new unpublished theme install set to the same menu.

If a fresh theme with no customizations and no apps works fine you need to diff, in diff software like Meld, the live themes code against the fresh one’s code in a game of spot the differences to find relevant changes.

If you need this debugged and fixed professionally then contact me by mail for services.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence..
Contact info in signature.

The menu HTML is there, something going on with the theme not getting it’s .js class added to the body tag once the page loads to indicate that javascript is available.

The menus **non-**visibility starts in component-menu-drawer.css line~28:

.menu-drawer {
    position:absolute;
    transform: translate(-100%);
    visibility: hidden;
    z-index: 3;
    left: 0;
    top: 100%;
    width: 100%;
    padding: 0;
    background-color: rgb(var(--color-background));
    overflow-x: hidden;
    filter: drop-shadow(var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-shadow),var(--drawer-shadow-opacity)))
}

The transform and visibility rules should get overridden when the menu is open , and/or a transition animation happens when the menu opens.

A CSS band-aid follows, there may be other issues, this band-aid does not fix the core issues , band-aids may degrade performance. Use the CSS in a custom css setting

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

/* CSS kludge because .js javascript class on body tag is not working, see component-menu-drawer.css line~55 for proper usage when .js javascript class on body tag is working properly */
details[open] >.menu-drawer, details[open] > .menu-drawer__submenu {
    transform: translate(0) !important;
    visibility: visible !important;
}

details[open] > .menu-drawer__submenu {
    transform: translate(0) !important;
    visibility: visible !important;
}

[BAFC]

Hi PaulNewton,

Thanks for your comprehensive explanation.

I removed the three apps I had installed, and there was no custom code as I installed the latest version of Dawn that then solved the problem. This made no difference. As stated it worked for a few hours after I upgraded from version 9.0 to 11.0 and then stopped working without any additional changes being made.

I looked at a new install of Dawn in the Theme.liquid file, and the code was different from what I had in my theme.liquid file on the live site? This seems strange as I updated the live site to the same 11.0 version yesterday and did not make any customisations.

I copied across the new install version of the them.liquid file into the live sites version, and this has solved the issue with the mobile menu.

I am not sure what happened here? I will monitor for a while without any customisations etc and see if the issue presents itself again.

I think by doing this I have removed the google ID tags etc?

Thoughts?

Regards

BAFC

[PaulNewton]

@BAFC

.. it worked for a few hours after I upgraded from version 9.0 to 11.0 and then stopped working without any additional changes being made.

Your browser and shopify can both serve stale cached content so it’s just as likely that during those few hours your were looking at outdated content being served.

Always flush browser cache when making large changes to web systems.

As for theme.liquid who knows it probably had changes in it that the upgrade tried to preserve, though afaik the upgrade isn’t supposed to even be possible if that file or other key files have been changed; shopify doesn’t really clarify the process.

[BAFC]

Hi,

Ref:

"Your browser and shopify can both serve stale cached content so it’s just as likely that during those few hours your were looking at outdated content being served.

Always flush browser cache when making large changes to web systems."

I always flush the browser cache. The fact it was not working and then I updated to 11.0, flushed the cache in the browser etc, and then it worked indicated that the issue had been resolved. For it to then break again seems odd?

I agree with your comments, the theme.liquid files were significantly different. Perhaps the original upgrade to 11.0 was corrupt?

Anyway, I will monitor and if I cannot solve, then I may have to take you up on your offer to look at the issue in more depth.

Thanks.

Kind regards

BAFC