Need Help with Transparent Header with Trade Theme

Store Design
, , , ,

Topic summary

A Shopify beginner using the Trade theme needs help fixing a transparent header issue. The header successfully displays as transparent on the homepage, but when scrolling down, it turns white with white text (making content invisible).

Problem Details:

  • Initial CSS code creates transparent header but causes white-on-white text when scrolling
  • User shared website URL with password for troubleshooting

Proposed Solutions:

Two community members offered CSS-only fixes (no JavaScript needed):

  1. First approach: Add CSS to base.css file targeting .header.black elements to force black text color on scroll

  2. Second approach: Add CSS via Theme Settings > Custom CSS targeting .scrolled-past-header to change text to black

Both solutions include step-by-step instructions with screenshots showing where to add the code. The discussion remains open pending confirmation from the original poster on whether either solution resolved the issue.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
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.