Mobile Header transparent (only on home page) , when scrolled it should be white

Store Design
, , , , , , , , ,

Topic summary

A user working with Shopify’s Dawn theme needs the mobile header to be transparent only on the homepage, then turn brown when scrolled or on other pages. Breadcrumbs should remain unaffected.

Proposed Solutions:

  • One responder suggests hiring a developer due to the custom coding complexity
  • Another provides a detailed CSS solution:
    • Navigate to Shopify admin > Online Store > Edit Code
    • Locate the “theme.liquid” file
    • Add custom CSS code above the </head> tag
    • The code uses media queries targeting screens under 768px width
    • Includes template-specific styling using {% if template.name == "index" %}
    • Makes the sticky header background transparent and adjusts main content margin

Status: The discussion includes a code snippet and screenshots demonstrating the implementation, but no confirmation yet whether the solution worked for the original poster.

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

I’m using dawn latest theme, in that I need to make the mobile header transparent only in home page when scrolled it should turn into brown color in all other pages the header should be brown. the breadcrumbs should not be headed.

website: https://rugd-in.myshopify.com/

password: rugged

2

Hi @Sivadarshan , this will require some custom coding. I will suggest you to hire a developer.

Thanks!

3

Hi @Sivadarshan

You can follow our detailed guide below here:

Step 1: Go to your Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
Step 2: Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
Step 3: Add the following code at the bottom of the file above tag

Here is the code part for you to add:

{% if template.name == "index" %}
      {% style %}
        @media screen and (max-width: 768px){
          sticky-header.gradient {
              background: transparent !important;
          }
          main#MainContent {
              margin-top: -60px;
          }
        }
      {% endstyle %}
    {% endif %}

Here is a screenshot from the code part for example: https://prnt.sc/2GR0vFJoTVHo

image.png
image.png348×621 172 KB

Please let me know if it works. Thank you so much!

Best,

Daisy - Avada Support Team.

1 Like