A user needed to hide the header (or specifically the menu button) on mobile view for their Shopify store using the Impact theme with Globo Mega Menu app. They wanted to use a different mobile menu but couldn’t configure this through the theme editor.
Solutions provided:
Option 1: Add CSS code to theme.liquid file above the </body> tag using media query @media (max-width: 768px) to hide the header element
Option 2: Similar approach placing CSS under <style> tag in theme.liquid
Option 3: Add CSS targeting specific button class button.tap-area.lg\:hidden with display: none !important; to theme.css file
Resolution: The user confirmed that multiple solutions worked successfully. The discussion reached a resolution with the original poster accepting the help and marking solutions as helpful.
Summarized with AI on October 30.
AI used: claude-sonnet-4-5-20250929.
Hello, I’m trying to hide the header on the mobile view of our Shopify shop.
Hiding just the menu button in the header would work as well.
I’ve tried various code snippets I’ve found in this forum, but for some reason, none of them work. I am not coding savvy at all.
The shop is currently under construction here:
We are using the “Impact” theme and “Globo Mega Menu” app to build menus.
I’m using a different menu on mobile so I need to hide the header or just the menu button in the header on mobile. I can’t do this within the editor, so I assume I’d need to do this with code.
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution
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.
