Hiding header, or specific items in header, on mobile view

[ChrisXSyntace]

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:

https://syntace-b2c.myshopify.com/

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.

Does anyone have an idea?

[Moeed · Accepted solution]

Hey @ChrisXSyntace 

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>
@media screen and (max-width: 767px) {
button.tap-area.lg\:hidden[aria-controls="header-sidebar-menu"] {
    display: none !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ChrisXSyntace]

Thank you!

[Moeed]

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.

[Mustafa_Ali]

<style>
@media screen and (max-width: 767px) {
button.tap-area.lg\:hidden[aria-controls="header-sidebar-menu"] {
    display: none !important;
}
}
</style>

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

[ChrisXSyntace]

Thank you, this one worked too!

[Rahul_dhiman]

Hello @ChrisXSyntace 
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.

button.tap-area.lg\:hidden {
display: none !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks