How to customize menu to transparent, and after scrolling it becomes blurred?

Store Design
, , ,

Topic summary

A user working with Shopify’s Dawn theme wants to create a transparent header menu that overlays the banner image, then transitions to a blurred/colored background when scrolling down the page.

Solution Provided:

  • Add custom CSS/JavaScript code to the theme.liquid file after the <head> tag
  • The code targets the homepage template specifically ({% if template == 'index' %})
  • Implementation successfully creates the desired transparent-to-opaque scroll effect

Follow-up Request:
Another user asks how to slow down the transition animation speed between the transparent and colored states.

Status: Initial question resolved; transition speed customization remains unanswered.

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

Hello!

I’m using the DAWN theme.

I would like to know how to make the menu transparent, so that it appears above the banner.

And after I scroll down the page, I want it to be blurred with color, so it doesn’t disappear into the page.

SITE EXAMPLE: WWW.INSIDERSTORE.COM.BR

kauecadete_0-1727227775086.png
kauecadete_0-1727227775086.png1365×441 283 KB

depois de rolar:

kauecadete_1-1727227793510.png
kauecadete_1-1727227793510.png1365×381 267 KB

2

Hello!!!

My website url is https://7eab60-11.myshopify.com/

It is still under construction

3

Hi @kauecadete

Please add this code to theme.liquid file, after in Sale channels > Online Store > Themes > Edit code

{% if template == 'index' %}

{% endif %}
1 Like
4

Thank you very much!!

I’ll buy you a coffe!

1 Like
5

Thanks, and very welcome!

6

thanks code is working,

can you please also provide code how to make the changing process slower?