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.

ezgif.com-gif-maker.gif 


Enabling shrinking header

To turn on shrinking header, go to Design > Main layout > Header and toggle Enable shrinking header.

shrhdr.png 

 

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:

shrink-pad.png

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.

logo-size.png 

 

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:

ezgif.com-video-to-gif__12_.gif

 

If you want all rows in your header to remain after the shrink, don't toggle Only show navigation row:

ezgif.com-video-to-gif__13_.gif 

Was this article helpful?
2 out of 2 found this helpful