Create Different Levels of Sticky Headers in Breakdance Builder

This guide will show you how to level up your website with sticky headers in Breakdance. Highlight key site elements as users scroll and add a reveal animation for a polished and professional-looking site.

Christy Cañete

Updated October 24, 2023

Breakdance sticky header

Breakdance sticky header

Reading Time: 3 minutes

Imagine having a primary header at the top of your page. Here, you’ll find the essential elements like the navigation links, logo, company title, and tags. 

You want your users to have constant access to your site’s main navigation even if they’ve scrolled far down the page. So you added a sticky header. A handy feature, right?

However, there's a catch. A sticky header shouldn't take up too much space on the screen. 

A practical approach? Create a full primary header with all the details. Then, add a secondary, more compact sticky header that highlights only the key elements. You'd aim for a header design that looks similar to this.

Breakdance sticky header

Now, onto the core part. How do we set this up in Breakdance? Follow the steps below to learn how to replicate the sticky header in our example.

How to Create Different Levels of Sticky Headers in Breakdance

1) Create the First Header Builder

The first sticky header should only appear at the top when scrolling. So, let’s do that! 

Start with a blank header template.

add a header template in Breakdance

On the left side menu, search and add a ‘Header Builder’ element. 

Tip: While it’s possible to create a header using the ‘Section’ element, the 'Header Builder' is better suited for this purpose. It offers a scroll behavior feature which the regular section element lacks.

Next, add a logo, text, or any element you want to represent your business or brand. Use the Style tab on the left to adjust background color, typography, element size, and layout.

add style to Breakdance header

2) Design the Second Header Builder  

This header is your primary one. It's visible initially and is replaced by the sticky header as the page scrolls. 

add Breakdance header builder

Just as before, add a 'Header Builder' element. Insert a logo, menu builder, or any other desired elements. Style it in a way that reflects your brand.

Breakdance header builder

3) Enable the Sticky Feature

Click the first ‘Header Builder’ element. Navigate to the Style tab on the left and toggle the enable option.

enable sticky header in Breakdance

4) Position the Sticky Header at the Top

Additional options should show up once the sticky is enabled. 

First, choose a position where you want your sticky header to stay as you scroll. Let’s click the ‘top’ option.

position header on top of page

5) Add a Scroll Behavior

Set the first header to show only upon scrolling. 

add scroll behavior in Breakdance

Activate the 'Hide Until Scroll' feature. Then, add a scroll distance, which determines when the header begins to show. I've chosen 150px, but tweak this to your preference.

add scroll distance in Breakdance

6) Add a Reveal Animation (Optional)

Smooth transitions make your header look polished and professional. 

Here, we’re going to add the fade effect to reveal the header as we scroll. While this is optional, I highly recommend you do so. Sudden change can be jarring, but a gentle fade can help guide your user’s attention without startling them.

So, let’s click the ‘Reveal Animation’ drop-down menu and choose ‘Fade.’ 

add scroll effects in Breakdance

Note that you can also choose other animation effects on the drop-down, depending on the mood that you want to convey. For example, fast-paced animations add excitement while gentle fades convey professionalism and a composed atmosphere.

7) Save and Preview

Once you’re satisfied with the settings, click save. Check your header on the front-end.

Here’s the final view of our sticky header.

Breakdance sticky header

Hopefully, you’ve found this Breakdance tip helpful. If you have other tips to share to style a sticky header, please do let me know in the comments!

Want to Learn Even More?

If you enjoyed this article, subscribe to our free 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
Most Voted
Newest Oldest
Inline Feedbacks
View all comments