Dawn theme Header Customisation

[Sivadarshan]

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.

[gerardm]

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);
}

[Sivadarshan]

@gerardm Thanks, can you please demonstrate where to add the code

[gerardm]

You could try adding it in Themes > Customize > Header > Custom CSS

 

[Sivadarshan]

@gerardmthanks 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?

[gerardm]

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.

  

[Sivadarshan]

@gerardm Maybe in the header.liquid

[gerardm]

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.

[Sivadarshan]

@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