Shrink Header on Scroll with Breakdance Builder

A header is one of the main visual elements of your website. It helps users navigate to your site. It displays important information about your business. It sets the tone for each of your pages.

Yet, sometimes, headers can seem a bit plain.

Why not level it up a bit and make it more interesting? For instance, shrink your header on scroll. 

I believe this technique has real benefits. One, it makes your page more engaging. Second, it maximizes screen space. This means less clutter as users scroll. And, my favorite reason, it provides a modern and interactive feel!

Let’s explore how we can implement a shrinking header using Breakdance Builder. Follow this quick guide to give your site that polished look.

How to Shrink Header on Scroll in Breakdance

1) Open a header template in the Breakdance editor. Start with a predesigned header, or create one from scratch.

In this guide, let’s start with a blank canvas.

2) Add a header builder element. 

Sections are also an option. But for this purpose, I personally find the header builder element more flexible. It provides exclusive styling features, like scroll behavior, not found in sections.

3) Customize your header. Add elements like a menu builder, logo, links, etc.

Then style it the way you want.

4) Once you’re satisfied with the visual appeal of your header, it’s time to make it sticky.

Tap the header builder element. Then go to the Settings tab on the left. Click Animations > Sticky and choose a position to display the sticky header. Here, we’re going to select ‘top.’

Test your sticky header.

5) Next, add a scrolling animation to the header. Back to the settings tab, click ‘Scrolling Animation’ and toggle the ‘Enabled’ switch to ON.

6) A list of scroll animations will appear. 

For a shrinking effect, select 'Scale'. A new window will pop up. 

As the goal is for the header to start large and shrink on scrolling, input a value in the 'Start' field. I've opted for 2.5, but play around with different numbers to find your fit.

7) Save the settings. Preview your header on the front-end. You should be able to attain something like this.

And there you have it! 

If you have other ideas on how to shrink headers on scroll in Breakdance, please let me know in the comments.

In the meantime, feel free to explore Breakdance’s extensive animation libraries. Check out our separate guide on integrating Element’s Hive in Breakdance. I’m sure you’ll love it!