Transparent to solid header

Store Design
, ,
1

I am looking to make my store homepage header to be transparent with my main logo, menu and all icons to be white when at the top of the homepage. And once scrolled the header to change to white with the logo, menu and all icons to turn to black.

Ps. Its important that the first transparent version of the header is overlapping the Image banner

Thank you very much in advance

2

Screenshot 2026-01-14 at 8.57.01 AM
Screenshot 2026-01-14 at 8.57.01 AM1920×1143 147 KB

3

Screenshot 2026-01-14 at 8.55.14 AM
Screenshot 2026-01-14 at 8.55.14 AM1920×1147 176 KB

4

Hi @Jaywilson35

Okay, please send me the store URL and collaborator access so I can check it properly and provide you with the exact solution.

Best regards,
Devcoder :laptop:

5

Hi,
I see the site you provided is already as you requested. If that is the example site, please share the link to your site.

6

Hi, @Jaywilson35
Can you share your store url so that I can check it?

8

My theme is the Dawn theme

10

Please add this code to Custom CSS in theme.liquid file below <head> of your theme

{% if template == 'index' %}
<style>
.shopify-section-header-sticky sticky-header { 
      background: transparent; 
      transition: background 0.25s ease;
}
#MainContent { margin-top: calc(var(--header-height) * -1); }
.header__menu-item, summary.list-menu__item, .header__icon,
.header-localization .disclosure .localization-form__select { color: #fff; }
.header__heading-logo { filter: invert(1); }

html .shopify-section-header-sticky.scrolled-past-header sticky-header {
background: #fff;
}
html .shopify-section-header-sticky.scrolled-past-header .header__menu-item, html .shopify-section-header-sticky.scrolled-past-header summary.list-menu__item, html .shopify-section-header-sticky.scrolled-past-header .header__icon,
html .shopify-section-header-sticky.scrolled-past-header .header-localization .disclosure .localization-form__select { color: #121212; }
html .shopify-section-header-sticky.scrolled-past-header .header__heading-logo { filter: invert(0); }
</style>
{% endif %}

Best regards,
Dan from Ryviu: Product Reviews App

11

Perfect! Thank you so much

12

You are very welcome!

13

Just one thing i realized. The links go back to black when you hover over them, and the INFO link is still black

14

Same with all the icons like cart, account and search

15

Please update code to this

{% if template == 'index' %}
<style>
.shopify-section-header-sticky sticky-header { 
      background: transparent; 
      transition: background 0.25s ease;
}
#MainContent { margin-top: calc(var(--header-height) * -1); }
header #HeaderMenu-info, summary.list-menu__item, header .header__icon,
.header-localization .disclosure .localization-form__select,
header .header__menu-item:hover, header summary.list-menu__item:hover { color: #fff; }
.header__heading-logo { filter: invert(1); }

html .shopify-section-header-sticky.scrolled-past-header sticky-header {
background: #fff;
}
html .shopify-section-header-sticky.scrolled-past-header header #HeaderMenu-info, html .shopify-section-header-sticky.scrolled-past-header summary.list-menu__item, html .shopify-section-header-sticky.scrolled-past-header .header__icon,
html .shopify-section-header-sticky.scrolled-past-header .header-localization .disclosure .localization-form__select { color: #121212; }
html .shopify-section-header-sticky.scrolled-past-header .header__heading-logo { filter: invert(0); }
</style>
{% endif %}