Hi there,
I have a shopify store and while the main menu shows up on desktop fine (it sits underneath the logo in the transparent header), on a mobile the menu disappears and nothing appears when you hit the hamburger menu button. Recently I tried to alter it and the hamburger menu button disappeared altogether.
I have read through numerous other pages and tried adding the recommended code to get the menu to appear, however nothing seems to be working. I also went through and made a few of the menu’s and submenu’s that were marked as “hidden” in the code, “visible” to no avail (then changed everything back).
Looking for suggestions and help.
Website: www.schusserthreads.com.au
Hello @schusserthreads
Its Artzen Technologies! We will be happy to help you today.
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > theme.css and paste this at the bottom of the file:
svg.icon.icon-hamburger {
opacity: unset;
}
svg.icon.icon-close {
opacity: unset;
}
div#menu-drawer {
transform: none;
visibility: unset;
}
after that --:
Let me know if need further assistance
Regards,
Artzen Technologies
Hi Artzen_tech,
Thanks for your reply! It worked, the menu is visible and clickable !!
Unfortunately the formatting isn’t perfect and the menu is now showing up on the desktop. version too.
Add display none for the desktop.
And add Display: block CSS for the mobile screen.
.menu-drawer-container {
display: none;
}
@media screen and (max-width: 769px) {
.menu-drawer-container {
display: none;
}
}
Hi Artze_tech,
Thankyou for sending this. I can’t seem to access the screen editor you have pictured above.
This is called the inspector stylesheet, which is accessible when you right click on the frontend and click on Inspect
Right Click-> Inspect
Below is the screenshot for how to open this window.
When you click on this, it opens a window like the below attached screenshot
Mark it as accepted if solution helped
