Header to decrease in size when page is scroll down

Store Design
1

Hello,

I saw this website and like how the header stays on the page and becomes smaller in size when scrolling down but returns to its original size when it’s at the top: larkandpeony.com

I want my header with the Dawn theme to have the same effect. I would appreciate it if anyone could assist.

2

Hi @BettyslChan ,

In the customize section, update Sticky header to “Always. reduce logo size”

theycallmemakka_0-1702551172537.png
theycallmemakka_0-1702551172537.png1909×738 120 KB

3

Hello @BettyslChan ,

I understand you are looking to change the header section size on scroll.

You can implement this change by adding a small code in your store theme.liquid file.

Please follow these steps -:

  1. Go to Online Store → Themes-> click on 3 dots → Edit code.

  2. Search for the theme.liquid file and open it.

  3. Now paste the below mentioned code at the bottom of this file before tag https://prnt.sc/DJoqOzB7Xd6-
  1. Save.

Output will be like this → https://prnt.sc/pQvYlRiPCN1f , on scroll size will be https://prnt.sc/V7SgCWgqPen1

I hope code helps you.

Please let me know if you have any query or need further assistance

Thank you.