Dawn Theme: Sticky transparent header, but becomes solid when scrolling

Store Design

Topic summary

A user seeks to modify the Dawn theme header to be transparent at the top of the page and become sticky with a solid background when scrolling.

Proposed Solution:
A contributor provided custom CSS code to add to the assets/base.css file, targeting header transparency and positioning adjustments for screens wider than 990px.

Implementation Issues:

  • One user reported their logo disappeared after applying the code and asked how to restore it.
  • Two other users stated the code didn’t work for them and requested assistance.

Current Status:
The discussion remains open with unresolved problems. Multiple users are experiencing issues with the suggested CSS solution, and no follow-up fixes have been provided yet.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am using Dawn theme, with a solid header. I want to do the following:

  1. At the top of the page, I want the header to be transparent.

  2. When scrolling, I want the header to become sticky + solid, instead of transparent.

My url - https://greenly-living.myshopify.com/

Password - perry

Sticky header that becomes transparent/solid I’m referencing:

Screen Shot 2021-12-14 at 9.09.45 AM (1).png
Screen Shot 2021-12-14 at 9.09.45 AM (1).png3152×962 399 KB

Screen Shot 2021-12-14 at 9.09.41 AM (1).png
Screen Shot 2021-12-14 at 9.09.41 AM (1).png3130×772 317 KB

.

1 Like
2

@GREENS

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (min-width: 990px){
.site-header-transparent:not(.header--middle-left) .header__inline-menu {
    margin-top: 1.05rem;
}

.header:not(.header--middle-left) .header__inline-menu {
    margin-top: -3.95rem;
}

.header.header--top-center .header__heading, .header.header--top-center .header__heading-link {
    justify-self: center;
    text-align: center;
    display: none;
}

.site-header-transparent.header--top-center .header__heading, .site-header-transparent.header--top-center .header__heading-link {
    justify-self: center;
    text-align: center;
    display: block;
}

}

Hope this works.

if any problem let me know!

Thanks!

3

@dmwwebartisan after I did the code for the transparent sticky background my logo dissappeared how do i code it back in?

4

@jg6

Please share your store URL! and a screenshot of what do you want!

Thanks!

5

I’ve just tried this code, but nothing happen to the header. Please can you help me?

6

same here, have you found a solution?