Create a Page Header in Breakdance Builder

Published July 25, 2022

A page header is the first thing that visitors will see when they come to your website, so it's important to make a good impression. No website design is complete without a custom header that reflects the site's unique personality. A header is reflective of a websites brand and should be given careful consideration in the design process. Headers play a critical role in setting the tone of a website and can be used to convey important information to visitors. Fortunately, creating a header in Breakdance is easy.

What is a Header

A header is the top area of a website that typically contains the site's logo, title, and primary navigation. Headers are usually visible on every page of a website and serve as a way to orient visitors and help them navigate the site. The header will be the first impression visitors have of your website, so it's important to make sure it reflects the site's personality and conveys the right message.

There are a few key elements to keep in mind when designing a header:

  1. The header should be simple and easy to understand
  2. The header should be visually appealing and reflect the overall tone of the website
  3. The header should be easy to navigate

Headers should also contain functionality features like CTA buttons and a shopping card (if developing an e-commerce site)

How To Create a WordPress Header in Breakdance

Create and edit your header easily by following these steps: 

  • Go to WordPress Dashboard
  • Breakdance > Headers
  • Click Add Header
  • Name your header template, apply it everywhere, and set a priority of 1
  • Now you’ll be able to create your header from scratch
  • Once you have made the needed changes to the header design, click save. This will apply for all pages across your Breakdance site
  • That’s it! You can now see your custom header live on your site

What Should All Headers Include?

There are a few essential elements that every header should include:

The site's logo: This is usually the first thing visitors will see when they come to your site, so it's important to make sure your logo is high-quality and reflective of your brand.

Primary navigation: Primary navigation should be easy to find and understand so that visitors can quickly get where they want to go.

CTA buttons: CTA (call-to-action) buttons are a great way to encourage visitors to take action on your site.

A search bar: A search bar is a great way to help visitors find what they're looking for on your site.

Shopping cart (for eCommerce sites): If you're running an online store, it's important to include a shopping cart in your header so that visitors can easily find and purchase your products.

Best Header Settings for Navigation

Now that you know how to create a header in Breakdance, it's time to start thinking about the best way to set up your navigation menus. Navigation menus are an important part of any website and should be given careful consideration.

There are a few things to keep in mind when setting up navigation menus:

  • The menu should be easy to understand and use
  • Choose descriptive names for your menu items so that visitors will know where they're going when they click on them
  • If you have a lot of pages, consider grouping them into categories to make the navigation menu more user-friendly
  • Make sure that your menus are responsive so that they look good on all devices

Best Header Settings for Mobile Devices

It's important to make sure that your header looks good on all devices, including mobile phones. Mobile traffic has been on the rise in recent years and now accounts for more than 50% of all web traffic. That means it's more important than ever to make sure your site is optimized for mobile devices.

There are a few things to keep in mind when setting up your header for mobile devices:

  • Make sure the header is easy to use and navigate on a small screen
  • Consider making the header smaller or removing some elements to make it simpler
  • Make sure the CTA buttons are big and easy to click on a small screen
  • Make sure the shopping cart is easily accessible on a small screen

Pro Tip: Users will leave your website within 5 seconds if your website structure is poor

Building a Header in Breakdance

We're going to add a section to our page, with an image and WP menu element. Style some settings to ensure it is horizontal and spaced out, reduce padding, and go into borders and add a default shadow. You'll be left with a header with a white background color, a logo image (that should be set to thumbnail) and a menu with entries from your normal WP menu builder.

section styling in breakdance builder
padding styling in breakdance builder
border styling in breakdance builder


Building a header in Breakdance is easy and only requires a few steps. By following the tips in this article, you can create a header that is easy to use and navigate, looks great on all devices, and helps visitors find what they're looking for on your site. Headers play a crucial role in website design and should be given careful consideration.

What other tips do you have for building a header in Breakdance? Share them with us in the comments 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


Notify of
Inline Feedbacks
View all comments
Made with 💛 by Gold Penguin © 2022