Header height that shrinks when scrolling - Canopy theme

Store Design
1

Hello!

URL: savvycommons.com

PW: gonawl

When users scroll on the site I want the header to stay at the top of each page but have the height shrink some so that all the user sees while scrolling is the bare minimum of information (logo, navigation, search, and cart).

Right now (sticky header enabled), when I scroll the header stays the exact same size as it is when the home page is first loaded and it takes up a lot of space (see below).

I don’t really use the Toolbar space so maybe there’s a way to move the search and cart features to the navigation bar and then delete the toolbar? Thanks in advance!

How the header displays when page first loads…

Screen Shot 2022-10-08 at 11.47.27 PM.png
Screen Shot 2022-10-08 at 11.47.27 PM.png1410×606 399 KB

How the header displays while scrolling… same height only difference is announcement bar disappears…

Screen Shot 2022-10-08 at 11.48.13 PM.png
Screen Shot 2022-10-08 at 11.48.13 PM.png1421×641 50.2 KB

2

@taylormn7
Hello,
I Have to Check Your Issue
Do You Like This

oscprofessional_0-1665386111157.png
oscprofessional_0-1665386111157.png1485×516 412 KB

Its Customization work so can you please share your store Access

3

Yes that’s much better!

I don’t know how code works but I intend to eventually add a picture in the header that uses parallax scrolling so I’m not sure if that needs to be taken into account when creating the code.

store: 0b188d.myshopify.com

pw: gonawl

4

@oscprofessional

Hi, checking in to see of this is something you still think you can help me with?

Thanks