How to shrink the header and logo on Scroll

Shrinking the header

That's the easiest part, as we don't need to add any custom CSS or magic trick. Breakdance, once again, made it really easy.

Step 1

Select your Header Builder element, and set a Min Height. By default there are some paddings so you can set them to zero too, then you will have the exact height you entered:

shrinking-header-settings

Step 2

Enable the Sticky option and go to the Style settings.
You can set a new height, and even change the background color of the header.
Type transparent if you want it to be...transparent!

shrinking-header-style

Shrinking the logo

Step 1

Once again, we have to set the height first. Select your image, set the Height and add a Transition Duration:

shrinking-logo-settings

Step 2

Add a class to your image, so it's easier to target with some custom CSS (ex. .logo) :

shrinking-logo-class

Step 3

Finally, select your Header Builder element, go to the Advanced Panel and add this custom CSS:

%%SELECTOR%%.bde-header-builder--sticky-styles .logo img { height:16px }
shrinking-logo-css

Check this page to see the effect in action:

https://breakdance4fun.supadezign.com/shrinking-header/

shrinking-animation