Create a Floating Header in Breakdance Builder

Published July 27, 2022

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. This can be a great way to keep visitors engaged and aesthetically pleased with your site, and it's easy to do with Breakdance Builder.

sample header animation and fade by gold penguin

Create a Header

First, you'll have to create a header template. Once your template is setup, you can begin to start the design.

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.

Making your Breakdance Header Float

Want to add even more customization to your header? Let's make it float! Making your header float means that it will appear to be placed on top of the rest of your content regardless of page content. To do this, 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

Conclusion

Breakdance gives users great customization options for headers. By following the steps above, you can create a floating header menu that will engage visitors and make your site look more professional. If you have any questions about headers in Breakdance, feel free to leave a comment below.

Written by Justin
Justin is the founder of Gold Penguin, a web design and marketing agency that helps businesses achieve their online goals. Justin has a passion for web design and marketing, and he loves working with clients to help them grow their businesses.
Gold Penguin
Web Development

SEO Optimization


Content Writing

Lead Generation
Share Post

Related Posts

Comments

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Made with 💛 by Gold Penguin © 2022