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

Store Design
, , ,
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 %}
4

Thank you very much!!

I’ll buy you a coffe!

5

Thanks, and very welcome!

6

thanks code is working,

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