How do I create Transparent Header on Dawn Theme V15 with white Sticky Header?

Shopify Discussion

Topic summary

A user seeks to implement a transparent header that becomes white and sticky on scroll for Dawn Theme V15, preferably using only CSS.

Initial Solution Attempt:

  • A contributor provided CSS code to add to base.css targeting sticky-header.header-wrapper with transparent background
  • This made the header transparent on all pages when scrolling, not just the homepage as desired

Revised Approach:

  • Another contributor suggested adding conditional code to theme.liquid that applies styling only when template == 'index'
  • This successfully created the transparent header on the homepage

Remaining Issues:

  • Header elements (cart, search, navigation, logo) need to be white on the transparent header and their current color on the sticky header
  • The solution breaks on mobile: when opening the menu on the homepage, the header stays transparent instead of becoming solid, causing display problems

Current Status:
The discussion remains unresolved, with the mobile menu transparency issue requiring further troubleshooting.

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

I am using the Dawn Theme V15 for my website and I would like to create a transparent header that transitions to a white sticky header as the user scrolls. Can you provide detailed instructions on how to achieve this by changing only the CSS code, if possible? If it’s not feasible without adding extra JavaScript or Liquid code, that would be fine as well.

Website: https://plomo.shop

1 Like
2
  • Here is the solution for you @8marketing
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
sticky-header.header-wrapper {
 background-color: transparent !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721045067504.png
BSSTekLabs_0-1721045067504.png1893×889 294 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
3

I have added it, but now you can take a look at my Page, it is transparent if I scroll down, but it should be white if I scroll down and be transparent normally and just on the Homepage.

1 Like
4

I see it is having a transparent background in every page. Can you share the page url without transparent background?

5

Now it should be normal. I have deleted the Code from .css
It should look like this Page : https://www.zeazonclo.com/

1 Like
6

Hello @8marketing
Go to online store ---------> themes --------------> actions ------> edit code------->theme.liquid file
and add this code below to your theme.liquid file, after .

{% if template == 'index' %}

{% endif %}

If this was helpful, hit the like button and mark the job as completed.
Thanks

1 Like
7

Yes, it works, but I would like also the Elements like Cart, Search, Navigation and Logo in white on the transparent Header, and on the Sticky header it should be like it is.

8
  1. I would like also the Elements like Cart, Search, Navigation and Logo in white on the transparent Header:-
    Ans - only your logo is in black and rest - the cart, search, navigation are in white.

4.png
4.png1892×184 324 KB

let me know

9

My Page is https://plomo.shop
And now I see that your code doesn’t work correctly, because if I’m on mobile, and open Menu on Homepage, the header stays transparent and it doesn’t looks good.