I want the Shopify header to only display on mobile

Technical Q&A

Topic summary

A user wants to hide the Shopify store header on desktop while keeping it visible on mobile devices, and also make the header transparent.

Solution Provided:

  • Access theme code via Online Store > Themes > Edit code
  • Add CSS media queries to the main stylesheet (base.css or theme.css)
  • Use display: none for screens ≥768px width and display: block for screens ≤767px
  • Adjust the CSS selector (e.g., header.site-header) based on the specific theme by inspecting elements in browser developer tools

Current Status:
The discussion remains ongoing. One responder claims to have sent additional CSS code privately for the transparency requirement, but the original poster is unclear about how to access it. Another user has requested the store URL and password to provide more specific assistance.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

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

2

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.

3

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.

4

I also need the header to be transparent

5

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!

6

how did you send it to me?

7

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