Transparent Site Header on Scroll

Ask & Offer

Topic summary

A user wants to create a transparent header effect on their Shopify Dawn theme website that changes opacity on scroll.

Initial Solution Provided:

  • Enable Dawn’s built-in sticky header via theme customizer
  • Add custom CSS snippet to reduce header opacity to 0.7 when scrolled, returning to full opacity on hover
  • Implementation involves creating a new snippet file and rendering it in the theme layout

Additional Requirements:

  • User requested the header be transparent specifically on the homepage landing page, allowing background images to show through
  • Solution updated with conditional code using {% if template == 'index' %} to apply transparent styling only to the homepage
  • Sets header position to fixed with transparent background and white text

Current Status:
User is requesting a final modification: they want the header to remain transparent at the top of the homepage but return to full opacity when hovering over it (similar to the Off-White website example). This question remains unanswered with the user asking multiple times for guidance on implementing this hover behavior.

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

If I wanted to have my website header opacity decrease as I scroll for my website that currently uses the Dawn theme, I assume I would require some custom code. Does anyone know how to do this? I want the header to be a solid white, and then when you scroll down, the opacity decreases and it becomes transparent.

Thanks so much in advance!

3

Hello @creativebp8!

Dawn theme already has a Sticky Header that can be directly enabled via the theme customizer.

  1. Open the Theme Customizer for the theme where you would like to apply the modifications as directed in the screenshot below.

    1600×801 121 KB

  2. Click on the Header section. Here you can configure the Sticky Header settings.

    1600×600 145 KB

  3. You should now be able to add the sticky header settings as you desire. For adding transparency, let’s add some simple styling to the theme. From the Theme Customizer, let’s go to the Code Editor as directed:

    1600×604 139 KB

  4. Let’s create a new snippet to add these modifications. We suggest using a snippet so you can easily add or remove it as needed. The screenshot below shows how to create a new snippet:

    1600×932 107 KB

  5. Now, inside this file, paste in the code below:

<style>
  .shopify-section.section-header.shopify-section-group-header-group.scrolled-past-header {
    opacity: 0.7;
   }
  .shopify-section.section-header.shopify-section-group-header-group.scrolled-past-header:hover {
    opacity: 1;
  }
  .shopify-section.section-header.shopify-section-group-header-group {
    transition: opacity 0.15s ease;
  }
</style>
  1. Finally, let’s render this file inside your theme layout file just before the closing tag. Screenshot below for reference:
    1600×960 381 KB

And we’re done! Make sure to save these changes. Once saved, let’s go to the storefront. It should now behave something like so:

If my response helped you, please consider giving it a like ( :+1:) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Thank you!

Regards,
Aaryan from Swym

1 Like
4

This was so helpful! Thank you! Is it a possibility to give it a transparent look constantly, but only on my home landing page as well?

5

Basically so the photo comes through the header, as shown in the reference photo?

Screenshot 2025-07-31 at 11.03.32 PM
Screenshot 2025-07-31 at 11.03.32 PM1920×905 83.2 KB

6

Heya @creativebp8 I am glad that our response helped!

Thanks for providing the reference image; it clarifies the requirement significantly.

  1. Open the code editor for your desired theme as directed:
    1600×770 129 KB
  2. Let’s go back to the snippet we previously created. To ensure that the header is transparent on the home page, update the contents of the file to the snippet given below:
<style id="custom-header-styles">
  .shopify-section.section-header.shopify-section-group-header-group.scrolled-past-header {
    opacity: 0.7;
  }
  .shopify-section.section-header.shopify-section-group-header-group.scrolled-past-header:hover {
    opacity: 1;
  }
  .shopify-section.section-header.shopify-section-group-header-group {
    transition: opacity 0.15s ease;
  }
</style>
{% if template == 'index' %}
<script>
    document.getElementById("custom-header-styles").innerHTML += `
      .shopify-section.section-header.shopify-section-group-header-group {
         position:fixed;
        top:0;
        width: 100%;
      }
     .shopify-section.section-header.shopify-section-group-header-group *{
        background: transparent;
        color: white;
     }`;
</script>
{% endif %}
  1. Let’s save. This is what it should look like now:

Please note that your logo is currently black, and with the banner image also being dark, it might not be visible.

Thank you!

Regards,
Aaryan from Swym

7

This is great! Thank you so much. I love the way it looks at the top of the page, but when I hover over it, I would like it to go back to full opacity. Similar to this website. Thoughts on how to do this?

8

Is there a way to do this so when I later hover over the header, it comes back to full opacity? So it is only transparent when I am not hovering over it and at the top of the page. Just like this website.

9

Is there any way to do the above?