Shrinking Header

How To
1

Im looking creating a shrinking header where the height of the header gets smaller as you scroll down the page.

Any ideas how to achieve this?

Something like this, https://avktooling.dk/

2

Hi there :slight_smile:

For something simple like the example you provided you could use the .scrolling class that bricks natively adds to a fixed / sticky header on scroll.

Say in your header you have a wrapper that contains your logo, nav etc. Increase the top / bottom padding to something like 60px and then add the following css:

%root% {
     transition: .4s all ease-out;
}

.scrolling %root% {
     padding: 15px 20px;
}

You could of course also directly animate the height but personally I feel like the paddings are easier to control and harder to break accidentally :wink:

If you’re looking for something fancier you could use the Node Editor with some Scroll Events and GSAP animations.

3

thanks for your reply manc.
I like the simple solution and will look into implementing it.
Was looking into the Gsap too, but for this usecase might be overkill.
Keep it simple, easier to fix :slight_smile: