i want the Shopify header to only display on mobile

[shop22dash]

i want to remove the shopify header from desktop and have it only show on mobile

[mattsalsa]

Hi @shop22dash,

To hide the Shopify header on desktop and show it only on mobile:

1. Go to Online Store > Themes > Edit code

2. Open your main CSS file (usually in Assets, like base.css or theme.css)

3. Add this to the bottom of the file:

@media screen and (min-width: 768px) {
header.site-header {
display: none;
}
}

@media screen and (max-width: 767px) {
header.site-header {
display: block;
}
}

If header.site-header doesn’t match your theme, inspect the header element using your browser’s developer tools and adjust the class accordingly. Let me know your theme name if you want help identifying the right selector.

[mattsalsa]

Hi There,

To hide the Shopify header on desktop and show it only on mobile:

1. Go to Online Store > Themes > Edit code

2. Open your main CSS file (usually in Assets, like base.css or theme.css)

3. Add this to the bottom of the file:

@media screen and (min-width: 768px) {
header.site-header {
display: none;
}
}

@media screen and (max-width: 767px) {
header.site-header {
display: block;
}
}

If header.site-header doesn’t match your theme, inspect the header element using your browser’s developer tools and adjust the class accordingly. Let me know your theme name if you want help identifying the right selector.

[shop22dash]

I also need the header to be transparent

[mattsalsa]

Hey Shop22,

Just sent you a message regarding the code that you would want to add to your CSS file to achieve this. Let me know if you got it!

[shop22dash]

how did you send it to me?

[websensepro]

Hi @shop22dash  , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks