Dawn Theme smooth transition between the transparent header and normal header

Store Design
, , ,
1

Hi. I want to make a smooth transition for my header from transparent to normal colour when I scroll down. Does anyone know how to do it? I can’t figure out where to put the " transition: background-color 0.5s ease; " code.

Thank you!

website: https://viellelondon.com

pass: 123123123

2

Hi @AndreiGhetu

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

  • When scrolling down, we see that the theme will hide your header, this is consistent with user behavior, but according to your wishes, you want it from transparent to normal color, then scrolling down the header will appears, and scrolling up will hide the header,

  • If you want the header to appear smoother then add the code below

Step 1: Go to Theme => Online store => Edit code => Find file base.css

view (4).png
view (4).png1901×914 56.6 KB

Step 2: Add this CSS to the bottom of the base.css file => Click save

.section-header.animate {
    transition: top 0.5s ease !important;
}

If you want the header to show when scrolling down and hide when scrolling up, add the following CSS code:

.shopify-section-header-hidden {
    top: 0 !important;
}

.shopify-section-header-sticky {
    top: calc(-1 * var(--header-height)) !important;
}

Hope this helps you.

3

Hello, I am looking for the same thing. Did you manage to find a solution?