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:
