Gold Penguin Logo with Text

Create a Floating Header in Breakdance Builder

Breakdance gives users great customization options for headers. We can easily create a "floating" type header menu that stays at the top of the page as people scroll down. Here's how it works
Updated November 7, 2023

A website header is the first thing that visitors see when they come to your site, so you want to make sure it's not only easy to navigate, but eye-catching.

One way to do this is to create a "floating" header menu that stays at the top of the page as users scroll down. It's super easy in Breakdance and looks like this:

sample header animation and fade by gold penguin

Create a Header

First, you'll have to create a header template. Add a header builder block to your page with an image and WP Menu.

Set your logo image and it's dimensions to either 150x150 or 100x100. If you already have a menu set up on your site, you might see your WP menu populate with it's contents. If not, create a menu in your WordPress settings then set it in the block.

initial setup before adding image to header in breakdance

Great! Now you have a simple header that should automatically be formatted.

sample gold penguin header in breakdance

Making your Breakdance Header Sticky

A sticky header means that it will remain at the top of the screen as you scroll down. This keeps your header visible and accessible no matter where on the page a user is.

To make your header sticky, all you need to do is open the "sticky" setting and check it. It should remain at the top of the page no matter where you scroll on the page.

Hide Header on Scroll

We're going to add a nice animation and fade to your header. This makes your header hide after the user scrolls down, but quickly returns when a user scrolls up at any point on the page. Additionally, a fade in/out effect is added to make the header appear and disappear more smoothly.

Open the sticky header 'scroll behavior' tab and set hide after to a pixel or percentage amount. We are using 150px since it will be slightly after the header ends. For maximum responsiveness, this should be set to a certain percentage after scrolling. Set the reveal animation to fade and save your heading. Your header should look normal and smooth now.

Make The Header Float

We'll add a small shadow & some custom CSS. In the header builder, open borders and add a shadow. The default settings work pretty well for what we're trying to achieve, but feel free to play around with the settings to get your desired look.

Now open the settings tab of the header builder and go to advanced. Add the following CSS to the custom CSS input:

%%%%SELECTOR%%%% {
  margin: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

Margin is how much space is on each side of the element, and the border options slightly rounded the corners of our header. And that's it! Now you have a floating header menu that's easy to navigate, and looks great too.

final heading result in breakdance

And there you have 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 Justin Gluska
Justin is the founder of Gold Penguin, a business technology blog that helps people start, grow, and scale their business using AI. The world is changing and he believes it's best to make use of the new technology that is starting to change the world. If it can help you make more money or save you time, he'll write about it!
Subscribe
Notify of
guest

2 Comments
Most Voted
Newest Oldest
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