Hi @kauecadete
Please add this code to theme.liquid file, after in Sale channels > Online Store > Themes > Edit code
{% if template == 'index' %}
{% endif %}
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.
1 Like