Gold Penguin Logo with Text

Shrink Header on Scroll with Breakdance Builder

Enhance your site’s user experience with a dynamic shrinking header using Breakdance. Follow the simple steps in this tutorial to transform and animate your header effectively!
Updated October 1, 2023
shrinking header in Breakdance
shrinking header in Breakdance

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. 

shrinking header in Breakdance

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.

add new header template in Breakdance

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.

add a header builder in Breakdance

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

customize header in Breakdance

Then style it the way you want.

add header style in Breakdance

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.’

set sticky header on top

Test your sticky header.

Breakdance 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.

enable scrolling animation in Breakdance

6) A list of scroll animations will appear. 

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

add scroll behavior in Breakdance

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.

shrinking header in Breakdance

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!

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross