Set your header to shrink as visitors scroll down your website to create a dynamic effect and make a smaller version of your header stick at the top of the page.
Enabling shrinking header
To turn on shrinking header, go to Design > Main layout > Header and toggle Enable shrinking header.
How shrinking works
The shrinking effect is achieved in two ways:
- By resetting padding on your header row
- By reducing the size of images in your header
Criteria for shrinking
Your header must contain a Navigation module in order for the shrinking header option to work. Furthermore, the shrink only applies to rows containing an Image module (this is where you would have your logo). Any row not containing an image won't shrink and retains its existing padding.
What happens with the padding?
Let's say your header row has 30px top and bottom padding on it. When you enable fixed header, that padding gets reset to 0px and is replaced with the padding defined in the Shrinking header settings:
By default, we have added 8px top and bottom padding to the header in the shrunken state. This usually makes it look nice and creates a smooth shrinking effect. However, you may adjust these padding values to your liking.
What about images?
You can define how much you want your logo (and any other images you may have in your header) to shrink by specifying a percentage in Logo size on shrink.
Shrinking multi-row headers
If you have multiple rows in your header, you can decide if you want all of them to show after the shrink has triggered or if you only want the row containing your navigation to remain.
Criteria for shrinking
Your header must contain a Navigation module in order for the shrinking header option to work. Furthermore, the shrink only applies to rows containing an Image module (this is where you would have your logo). Any row not containing an image won't shrink and retains its existing padding.
If you want any rows not containing your navigation to be left out, toggle Only show navigation row:
If you want all rows in your header to remain after the shrink, don't toggle Only show navigation row: