A user wants to customize the Dawn theme header to be transparent on page load and display a frosted glass (blur) effect when scrolling—on both mobile and desktop, across all pages.
Current Status:
backdrop-filter: blur(10px) with semi-transparent background) was provided and successfully applied via the theme customizer’s Header > Custom CSS section.Remaining Issue:
header.liquid) control this behavior but are restricted to the index page via conditional statements ({%if %}).Next Steps:
On my website using the Dawn theme, I want to customize the header for both mobile and desktop views. Before scrolling, the header should be transparent; once the user scrolls, the header should have a frosted glass effect. For reference, here is the website: https://prashasya.com.
Thanks in advance.
It looks like you’ve tried adding the backdrop-filter blur. The issue I see is the background color used along side it try this…
.header-wrapper {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.2);
}
@gerardm Thanks, can you please demonstrate where to add the code
@gerardm thanks for the code! It’s working, but I need a tweak. I want the header to be transparent on page load and become blurred only on scroll on all the page, just like the reference website. Can you help me achieve this?
It looks like at one point in time you may have added some custom css and javascript to do this on the homepage. Do you know where you added these bits of code? These bits would need to be made global to achieve the effect you see on the homepage throughout the rest of the website.
@gerardm Maybe in the header.liquid
Most likely header and footer files. Are you able to find those snippets and send them? They are most likely accompanied by an {%if %} statement of some sort to originally only load them on index page. Those if statements need to be removed.
@gerardm So, can I share the downloaded theme file with you, so can you find the solution for this, because I’m new to shopify
