Transparent Header Problem

graceatsabun · ‎03-11-2025

Hi, I'm trying to make a header like the one on the https://fearofgod.com/ website. It's transparent with a slideshow behind it, then it turns white when scrolling and it is sticky. Also, this is only on the homepage, the header is sticky and white on every other page.

I've found some discussions about this online but none of them worked.

Does anyone know how to do this? I'm using the dawn theme 15.3

My site is www.mochibags.com

GTLOfficial · ‎03-11-2025

Hello @graceatsabun

Online Store ---> Themes ---> actions ---> edit code---> theme.liquid file, and add this code after <head>

<style>
{% if template == 'index' %}
.section-header .header-wrapper * { color: #fff; }
.section-header .header-wrapper .header__heading-logo { filter: invert(1); }
.section-header .header-wrapper { background: transparent; }
#MainContent { margin-top: -153px; }
.section-header.scrolled-past-header .header-wrapper { background: #fff !important; }
.section-header.scrolled-past-header .header-wrapper .header__heading-logo { filter: unset !important; }
.section-header .header-wrapper .mega-menu__link,
.section-header .header-wrapper .list-menu__item,
.section-header.scrolled-past-header .header-wrapper * { color: #121212bf !important; }
@media (max-width: 749px) {
#MainContent { margin-top: -97px; }
}
{% endif %}
</style>

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

graceatsabun · ‎03-11-2025

Hi there! Thank you so much for the solutions! Somehow, there is a white bar between the announcement bar and the header block now 😱

How can I remove this white bar?

oscprofessional · ‎03-11-2025

If you're looking to create a header similar to the one on https://fearofgod.com/ using the Dawn theme 15.3, here's how you can achieve it:

Steps 1: Enable sticky header

Go to Online Store → Themes → Click Customize.
Select the Header section.
Check "Enable sticky header" and click Save.

Steps 2: Add css for a transparent-to-white effect

For a transparent-to-white effect on the homepage, add this CSS in theme.liquid before </head>:

{% if template == 'index' %}
      <style>
        sticky-header.header-wrapper {
            background: transparent;
        }
        .scrolled-past-header sticky-header.header-wrapper {
            background: #fff;
        }
        main#MainContent {
            margin-top: -8.4rem;
         }
        @media (max-width: 768px) {
         main#MainContent {
            margin-top: -6.4rem;
         }
        }
      </style>
    {% endif %}

Steps 3: Save and check!

Transparent Header Problem