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:
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 the logo
Step 1
Once again, we have to set the height first. Select your image, set the Height and add a Transition Duration:
Step 2
Add a class to your image, so it's easier to target with some custom CSS (ex. .logo) :
Step 3
Finally, select your Header Builder element, go to the Advanced Panel and add this custom CSS:
Check this page to see the effect in action:
