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.
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.
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.
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.
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.
3) Enable the Sticky Feature
Click the first ‘Header Builder’ element. Navigate to the Style tab on the left and toggle the enable option.
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.
5) Add a Scroll Behavior
Set the first header to show only upon scrolling.
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.
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.’
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.
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!