How can I make a transparent header change to black when scrolling in Dawn template?

Store Design

Topic summary

A user working with Shopify’s Dawn theme wants to create a transparent header that becomes black when scrolling and remains fixed at all times. They note that Dawn no longer has a built-in transparency setting, requiring custom code.

Solution provided includes two steps:

  1. CSS modification - Add code to assets/base.css or theme.css to:

    • Make header fixed and transparent by default
    • Change background to black (note: provided code shows white #fff, may need adjustment) when scrolled
    • Include smooth transition effect

  2. JavaScript implementation - Insert script in theme.liquid before </body> tag to:

    • Detect scroll position (triggers at 50px)
    • Add/remove ‘scrolled’ class to toggle background color

Another user requested the store URL to provide more specific assistance. The discussion remains open for implementation and potential refinement.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hallo, ich benutze das Template Dawn und möchte das mein header Transparent ist.

Nein es gibt leider nicht (mehr) die Einstellung, dass er Transparent ist, sondern ich muss es Coden.

folgende Dinge sollen beachtet werden.

Der Header Transparent aber wenn ich Scrolle, soll sich der Hintergrund vom Header zu schwarz ändern.

der Header soll immer Fixiert sein und nicht nur beim hoch scrollen.

Kann jemand helfen?

Merci!

2

Hello @Maik55555
**
Step 1:- Add CSS**

  • Go to Theme Editor → Actions → Edit code → assets/base.css (or theme.css depending on your version) and add this at the bottom:
<style>
.header-wrapper {
 position: fixed;
 left: 0;
 width: 100%;
 background: transparent;
 transition: background-color 0.3s ease;
 z-index: 9999;
}

    /* State after scrolling */
.header-wrapper.scrolled {
 background-color: #fff;
}
 
.header-wrapper.scrolled {
 top: 0;
}
</style>

Step 2:- Add JavaScript

  • Go to theme.liquid and add this just before </body>:
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const header = document.querySelector(".header-wrapper");

    window.addEventListener("scroll", function () {
      if (window.scrollY > 50) {
        header.classList.add("scrolled");
      } else {
        header.classList.remove("scrolled");
      }
    });
  });
</script>

Step 3:- Save and Check

3

Hi,

Good morning,

Welcome to the shopify ,

Please share your store URL and if your store is password protected then also provide password too.
Thank you.