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

Store Design
, , , , , , , , ,
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.