Need Help with Transparent Header with Trade Theme

[uglyducking]

Hi there, 

I am new to shopify and html, currently trying to create a website using Trade theme with a transparent header and would like it to appear as the default Trade Theme header when scroll down. 

This is the code added before </head> and its working for transparent header but when I scroll down the page, the header became white background with white font. 

{% if template == 'index' %}
    <style>

    .header {
        position: fixed;
        width: 100%;
        top: 40px;
        transition: background-color 0.3s ease;
        left: 0;
        right: 0;
        margin: 0;
        max-width: 100%;
    }
    .header.transparent {
      background-color: transparent;
    }

    .header.black {
      background-color: #fff;
      top:0;
      color: black;
    }

    </style>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      var header = document.querySelector('.header');
      header.classList.add('transparent');
    });

  // Change header background on scroll
  window.addEventListener('scroll', function() {
    var header = document.querySelector('.header');
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      if (scrollTop > 0) {
        header.classList.remove('transparent');
        header.classList.add('black');
      } else {
        header.classList.remove('black');
        header.classList.add('transparent');
        }
  });
  </script>
  {% endif %}

Appreciate any help! 

[Dan-From-Ryviu]

Hi @uglyducking 

It does not need a java script code to do that; it just needs CSS. Please share your store URL so I can give you the code 

[uglyducking]

Hi here is the website and the password is thahso

[DaisyVo]

Hi @uglyducking 

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

.scrolled-past-header header.header * {
    color: black !important;
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[oscprofessional · Accepted solution]

Hello @uglyducking ,

Go to Online Store > Themes > Actions > Edit Code > base.css
Add below code in base.css  file

.header.black .header__heading-link .h2, .header.black .list-menu__item, .header.black span.header__active-menu-item, .header.black .header__icon {
    color: #000 !important;
}