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
1716 475 352

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

View solution in original post

Replies 2 (2)

ThePrimeWeb
Shopify Partner
1716 475 352

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
TeteiKamari
Visitor
2 0 0

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