Re: Make header background transparent, and change to white on scroll

TeteiKamari · ‎01-19-2024

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/

ThePrimeWeb · ‎01-20-2024

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,

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)

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

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? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎01-20-2024

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,

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)

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

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? [email protected] or check out the website
Check out our interview with Shopify!

TeteiKamari · ‎01-20-2024

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

ilhanakin · ‎04-28-2024

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 · ‎04-28-2024

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.

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

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

ilhanakin · ‎04-28-2024

yes it worked thank u so much bro

SoulHarvest · ‎06-30-2024

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

MRamzan · ‎09-11-2024

Follow these steps to make it transparent:

Hire Me:

WhatsApp: +91-9145985880
Email: [email protected]
Skype: mohdramzaan112

MRamzan · ‎09-11-2024

We can add trasparent header:

Hire Me:

WhatsApp: +91-9145985880
Email: [email protected]
Skype: mohdramzaan112

Re: Make header background transparent, and change to white on scroll

Make header background transparent, and change to white on scroll

☕Buy me a coffee☕

☕Buy me a coffee☕

☕Buy me a coffee☕

Community Blog Articles