How do I make my website header shrink when visitors scroll?

Want to improve the navigation experience on your Website Builder site? Try adding a shrinking effect to the header. When applied, the shrinking effect will pin your header to the top of your page and shrink it as visitors scroll. Once they return to the top of the page, the header will revert to its full size. 

This is a smart feature to apply if you want to ensure that your visitors can see as much of your website as possible while they scroll, without leading them away from important items, such as your menu, in the header.

• Step 1 - Go to the Header settings in your Website Builder editor
• Step 2 - Activate the shrinking effect
• Step 3 - Adjust the shrinking effect
• Step 4  - Preview, save and publish

Step 1 - Go to the Header settings in your Website Builder editor

1. Go to your Website Builder editor and click on your header at the very top of the page.
2. Click the Edit header tab that appears.

Step 2 - Activate the shrinking effect

1. You will now see two menus for the header: A properties panel and a floating menu. Find the latter and select Shrinking effect at the bottom of it.
2. Slide the Shrinking effect toggle to activate the effect.

Step 3 - Adjust the shrinking effect

Drag the marker on the bar in either direction to set how much your logo should shrink as visitors scroll down the page. The minimum shrinkage percentage is 10% and the maximum is 50%.

Step 4 - Preview, save and publish

Check your Preview to see the effect in action. Once you're happy with it, you can save and publish the change to your live website.

Related articles:

• Using animations on your Website Builder site
• Add Sticky buttons and a "Back to top" button to your Website Builder site