Need Help with Transparent Header with Trade Theme

Store Design
, , , ,
1

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 and its working for transparent header but when I scroll down the page, the header became white background with white font.

{% if template == 'index' %}
    
    
  {% endif %}

Appreciate any help!

2

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

3

Hi here is the website and the password is thahso

4

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;
}

oscprofessional_0-1735636217461.png
oscprofessional_0-1735636217461.png1904×553 50 KB

oscprofessional_1-1735636236240.png
oscprofessional_1-1735636236240.png1902×595 32.6 KB

5

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;
}

image (5).png
image (5).png1857×808 80.4 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.