Re: Hamburger Menu on mobile isn't working

ellzmai45 · ‎06-19-2024

Since updating to the latest DAWN template hamburger menu does not open on mobile!

have been through previous threads with this issue amending the code and nothing has worked

can anyone help?

www.lunacrest.co.uk

tim · ‎06-20-2024

Nope, it's not a CSS issue.

You have a broken HTML structure.

Menu does not work because your <html> element does not have "js" class, but has "no-js" instead and this happens because your SEO App code is added improperly. See how there are 2 <html> opening tags -- this is not allowed.

Browser will try to fix the problem and simply ignore the second one -- this is how you'll end up with <html class="no-js" ... > which prevents your menu from working properly (probably other areas are affected as well).

Note that Shopify has removed handling of "no-js" in recent versions of Dawn, it must be "js":

https://github.com/Shopify/dawn/pull/3245 :

Click to expand...

Why no <noscript>?
Javascript is an integral part of the modern web. Without JS, new Shopify theme features like Combined Listings simply will not work well because they require the use of the section API to progressively load content. Additionally, Checkout Extensibility (Shopify's upgraded checkout) requires JS. There is no value in the theme letting a no-JS user add items to cart if they aren't able to checkout, it would be better to fail fast.

Why no <noscript>?Javascript is an integral part of the modern web. Without JS, new Shopify theme features like Combined Listings simply will not work well because they require the use of the section API to progressively load content. Additionally, Checkout Extensibility (Shopify's upgraded checkout) requires JS. There is no value in the theme letting a no-JS user add items to cart if they aren't able to checkout, it would be better to fail fast.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Made4uo-Ribe · ‎06-19-2024

Hi @ellzmai45

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.

<style>
header-drawer .menu-drawer {
    transform: unset;
    visibility: visible;
}
</style>

And Save.

result:

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

ellzmai45 · ‎06-19-2024

This didn't work unfortunately, does this look correct?

Made4uo-Ribe · ‎06-19-2024

Yes, can you try to add on the custom.css on your theme editor.

Click the header

On the right side there will be new tab.

Find this one.

And paste the code below.

.menu-drawer {
    transform: unset;
    visibility: visible;
}

And Save.

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

tim · ‎06-20-2024

Nope, it's not a CSS issue.

You have a broken HTML structure.

Menu does not work because your <html> element does not have "js" class, but has "no-js" instead and this happens because your SEO App code is added improperly. See how there are 2 <html> opening tags -- this is not allowed.

Browser will try to fix the problem and simply ignore the second one -- this is how you'll end up with <html class="no-js" ... > which prevents your menu from working properly (probably other areas are affected as well).

Note that Shopify has removed handling of "no-js" in recent versions of Dawn, it must be "js":

https://github.com/Shopify/dawn/pull/3245 :

Click to expand...

Why no <noscript>?
Javascript is an integral part of the modern web. Without JS, new Shopify theme features like Combined Listings simply will not work well because they require the use of the section API to progressively load content. Additionally, Checkout Extensibility (Shopify's upgraded checkout) requires JS. There is no value in the theme letting a no-JS user add items to cart if they aren't able to checkout, it would be better to fail fast.

Why no <noscript>?Javascript is an integral part of the modern web. Without JS, new Shopify theme features like Combined Listings simply will not work well because they require the use of the section API to progressively load content. Additionally, Checkout Extensibility (Shopify's upgraded checkout) requires JS. There is no value in the theme letting a no-JS user add items to cart if they aren't able to checkout, it would be better to fail fast.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

ellzmai45 · ‎06-20-2024

Thank you! I would have never thought to change that part of the code , all working now I have deleted it

JosieatNouvelle · ‎07-02-2024

Hey Tim,
I'm having a similar issue. Ay chance you can assist?
Hamburger menu is no longer appearing in header, just at the base of mobile screen. This is taking up valuable real estate.
How can I add the hamburger to the Right hand side (logo on left).
When I choose this option in shopify on the logo is present.
www.nouvelleglass.com

tim · ‎07-03-2024

It's not a bug, rather a theme feature.

Potentially it's possible to place the menu button to be to the right of the logo;

however, what about the cart sticky which replaces the menu button when something is in the cart?

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

JosieatNouvelle · ‎07-03-2024

Thanks for looking into it. Looks like it's only able to be adjusted/sticky for Desktop.

itactuallyfits · ‎11-21-2024

Hello Tim,

Can you assist with my hamburger menu not working as well? I too had to update my Shopify theme. Here's my website: www.itactuallyfits.com. Thanks and I look forward to your reply!

tim · ‎11-23-2024

Briefly -- see that something is wrong with your popup. Try disabling it, if it's enabled.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

itactuallyfits · ‎11-25-2024

That did it! Thank you so much.

itactuallyfits · ‎11-25-2024

Hello again. I need to keep the pop up enabled that’s cause the hamburger bar not to work. Is there another solution to fix this problem without dis enabling the pop up? Thank you!

Re: Hamburger Menu on mobile isn't working

Hamburger Menu on mobile isn't working

Community Blog Articles