Make header background transparent, and change to white on scroll

Solved

Make header background transparent, and change to white on scroll

TeteiKamari
Visitor
2 0 0

Hi! I want to make my header background transparent, and then make it white once you start scrolling down. I already tried every single solution there is to find on this forum, and no line of code has worked on my page.

I'm using the Dawn 12.0.0 theme.

This is my page: https://43e44d-4.myshopify.com/

 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

Hey @TeteiKamari,

You can try adding the following code to the Custom CSS

sticky-header.header-wrapper.color-background-1.gradient {
    background: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    padding-top: 30px;
}

sticky-header.header-wrapper.color-background-1.gradient.active {
    background: #fff;
    padding-top: 0px;
}

Which should be here,

ThePrimeWeb_0-1705735345808.png


There's javascript involved, so go to you online store, and click Edit Code as shown below, (Make sure you are in your current theme)

ThePrimeWeb_1-1705735388685.png

 

Then look for the file named 'theme.liquid' and add the follow code right above the tag that says </body> as shown in the picture below

ThePrimeWeb_2-1705735443888.png

This is the code to paste

    <script>
      window.addEventListener('scroll', function() {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
          let headerElement = document.querySelector('sticky-header.header-wrapper.color-background-1.gradient');
      
          if (scrollTop > 0) {
              headerElement.classList.add('active');
              return;
          }
      
          headerElement.classList.remove('active');
      });
    </script>

 



Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 6 (6)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

Hey @TeteiKamari,

You can try adding the following code to the Custom CSS

sticky-header.header-wrapper.color-background-1.gradient {
    background: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    padding-top: 30px;
}

sticky-header.header-wrapper.color-background-1.gradient.active {
    background: #fff;
    padding-top: 0px;
}

Which should be here,

ThePrimeWeb_0-1705735345808.png


There's javascript involved, so go to you online store, and click Edit Code as shown below, (Make sure you are in your current theme)

ThePrimeWeb_1-1705735388685.png

 

Then look for the file named 'theme.liquid' and add the follow code right above the tag that says </body> as shown in the picture below

ThePrimeWeb_2-1705735443888.png

This is the code to paste

    <script>
      window.addEventListener('scroll', function() {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
          let headerElement = document.querySelector('sticky-header.header-wrapper.color-background-1.gradient');
      
          if (scrollTop > 0) {
              headerElement.classList.add('active');
              return;
          }
      
          headerElement.classList.remove('active');
      });
    </script>

 



Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
TeteiKamari
Visitor
2 0 0

This worked perfectly, I could even tweak it a bit to change the icon color aswell, thank you!

ilhanakin
Visitor
2 0 0

hello how can i get this ONLY on the main page because now i got this on every page and the texts are mixed up, which doesn't look right

ThePrimeWeb
Shopify Partner
2138 615 493

Hey @ilhanakin,

 

Replace the same two codes with these.

 

For this one, 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. 

 

{% if template.name == 'index' %}
<style>
sticky-header.header-wrapper.color-background-1.gradient {
    background: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    padding-top: 30px;
}

sticky-header.header-wrapper.color-background-1.gradient.active {
    background: #fff;
    padding-top: 0px;
}
</style>
{% endif %}

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1714311024393.jpeg

 

 

Then look for the file named 'theme.liquid' and add the follow code right above the tag that says </body>

 

{% if template.name == 'index' %}
    <script>
      window.addEventListener('scroll', function() {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
          let headerElement = document.querySelector('sticky-header.header-wrapper.color-background-1.gradient');
      
          if (scrollTop > 0) {
              headerElement.classList.add('active');
              return;
          }
      
          headerElement.classList.remove('active');
      });
    </script>
{% endif %}

 

Screenshot for reference

ThePrimeWeb_1-1714311046987.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ilhanakin
Visitor
2 0 0

yes it worked thank u so much bro

SoulHarvest
Tourist
13 0 11

Hi, I've tried your solution and it doesn't work, I was wondering if this solution only works for an older version or something? I'm using Dawn 15. I'm trying to get a transparent header like the fearofgod.com website, where it's transparent on the homepage but appears once you've scrolled. On their other pages, it's opaque and follows you as you scroll. I've added the CSS and the Javascript that you reccomended to Ilhanakin. Thank you in advance