Transparent Header on Pages Mobile

Store Design
,

Topic summary

A user is experiencing an issue where custom CSS code—intended to add a color gradient to pages—causes the header and sidebar to become transparent on mobile devices. The user wants to maintain the gradient while keeping the header/sidebar white.

Proposed Solutions:

  • One suggestion involves wrapping the CSS in a media query (@media (min-width: 750px)) to apply it only on desktop.
  • Another approach targets specific CSS selectors to apply the gradient only to main content areas while forcing header/sidebar elements back to white using !important.

Current Status:

  • The user has tested two different CSS code snippets provided by a community member, but neither worked as intended.
  • The first attempt removed the gradient entirely from pages.
  • The second attempt produced unexpected visual results (shown in screenshots).
  • Multiple community members are now requesting the store URL to inspect the theme structure and provide a more accurate solution.

The discussion remains ongoing with no resolution yet, as the root issue appears to be identifying the correct CSS selectors for the specific Shopify theme being used.

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

Hi Shopify Community,

I was given the following code by someone on here to customize the colour gradient on my page but for some reason it makes the header/sidebar transparent on pages on the mobile version of my store. Could someone help me keep the colour gradient whilst making the header/sidebar just the normal white it is.

Thanks in Advance!

image
image623×499 25.8 KB

2

Hi @clementgordon ,
Could you please share your store URL so I can take a closer look?
If possible, it would also be helpful if you could provide a few screenshots from both desktop and mobile, especially showing the transparent header/sidebar. That way, it’ll be easier to check and suggest the right fix.
Dear,
Dani from Samita

3

Hello @clementgordon
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

4

You can the part of the code in … into this so that the code will work on desktop only

@media (min-width: 750px) {

}
5

Hii @clementgordon,

The issue is that your current CSS applies the gradient background globally to the main#MainContent, which in some themes (especially on mobile) makes the header/sidebar area inherit transparency instead of keeping its solid background color.

You can fix this by limiting the gradient only to the main content area while keeping the header and sidebar with their default white background.

{% if template contains 'page' %}
  <style>
    /* Apply gradient only to the main content wrapper */
    main#MainContent {
      background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(176, 247, 197, 1));
    }

    /* Reset header and sidebar to white */
    header.site-header,
    .site-header,
    .header-wrapper,
    .sidebar,
    nav,
    .drawer {
      background: #ffffff !important;
    }

    /* If theme uses color scheme classes */
    .color-scheme-1.gradient {
      background: #ffffff !important;
    }
  </style>
{% endif %}

What this does:

  • Keeps the gradient on your page content only.

  • Forces the header/sidebar/drawer back to solid white (#ffffff).

  • Works for both desktop and mobile.

If you’d like me to implement this directly in your store (so you don’t have to worry about theme file edits), please feel free to reach out - my contact information is in my portfolio here: [https://rajatweb.dev/\]
You can also check my past Shopify works there. Thanks!

Rajat | Shopify Expert

6

Hi I just implemented the code instead of the original code and it just took away the gradient on my pages. Could you please advise me further?

image
image1175×629 28 KB

7

Got it :+1: Thanks for showing the result.

The reason your gradient disappeared is because your theme might not be using main#MainContent as the wrapper for the page content. Instead, some Shopify themes wrap content inside .page-width, .page-content, or .template-page.

We’ll need to target the right container while still forcing the header/sidebar to remain white.

{% if template contains 'page' %}
  <style>
    /* Gradient background on page content */
    main#MainContent,
    .template-page,
    .page-content,
    .page-width {
      background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(176, 247, 197, 1)) !important;
    }

    /* Keep header & sidebar white */
    header.site-header,
    .site-header,
    .header-wrapper,
    .sidebar,
    nav,
    .drawer {
      background: #ffffff !important;
    }

    /* Override theme color-scheme classes if needed */
    .color-scheme-1.gradient {
      background: #ffffff !important;
    }
  </style>
{% endif %}

If you want me to directly implement this fix for you, feel free to reach out - my contact info and past works are available in my [https://rajatweb.dev/\\\].

8

That didn’t work either and I dont really know how to explain what happened other than through the screenshot below:

image
image1395×802 87 KB

9

Hi @clementgordon ,

May I kindly ask you to share your website URL, so that I can assist you in resolving this issue?