How to Add a Logo to Your Author Website Header

Introduction

A professional logo is an essential feature of your author website header, reinforcing brand identity and improving navigation for visitors. In this lesson, you’ll learn how to add an image or text-based logo using Breakdance. Whether you have a fully designed logo or are starting with a simple text option, this guide ensures your header is functional, responsive, and easy to navigate on all devices. Follow these steps to create a user-friendly and visually cohesive website.

A Quick Word About Logos

Don’t spend a lot of time on a LOGO for your website.

A logo’s job is to assure the visitor they are where they think they are, your website. 

A simple logo with just your name is fine especially when you’re just starting out and defining your brand. In this lesson I’ll show you how to add an image based and a text based logo. 

The Breakdance Header Builder

OK, back in the WordPress dashboard lets go to Breakdance > Headers and under MH001 click on Edit in Breakdance.

• Toggle on the Elements and Structure Panels
• Add a new element
• Breakdance comes with a HEADER BUILDER Element that provides us with no code options to create advanced headers.
• For now we are going to stick with a simple accessible and responsive header and add extra features later.
• The HEADER BUILDER is a specialised SECTION element on its own so no need to add another section.

Add a Logo Image to our header.

Next we are going to add an image as the logo for this website.

• Add an image element to the head builder.
• Choose the image you want to add as the logo

Link to the Home Page

Logos are often used as a navigational aid for visitors to quickly return to the home page. We’ll set that up by adding a WRAPPER LINK element to the header, placing the image inside it and linking the Wrapper to the home page

• ADD a WRAPPER LINK element.
• The Wrapper Link element allows users to create hyperlinks around other elements, such as images and text.
• In the STRUCTURE PANEL drag the WRAPPER LINK above the IMAGE ELEMENT inside the HEADER BUILDER
• Staying inside the STRUCTURE PANEL drag the IMAGE ELEMENT up towards the WRAPPER LINK until it clicks into place underneath it.
• You can also drag and drop the IMAGE ELEMENT out and back in again on the main editor panel.
• In the STRUCTURE PANEL click on the WRAPPER LINK
• Click on the LINK icon and set the link to the homepage.

Now we have a simple logo image linked to the home page. Visitors to the website will be able to quickly get back to the home page from any location on the website just by clicking the icon.

But what if you don’t have a logo or haven’t fully settled on your website branding yet?

Add HEADING Logo to Our Header

No problem. We can use a HEADING ELEMENT as the logo instead.

• First I’ll delete the logo image – we don’t need two logos.

Let’s add a HEADING ELEMENT to the header and use it as a logo for the website

• Click the plus Symbol inside the Wrapper Link element.
• Add a Heading

Now, I could just type in some text here but instead I’ll take the opportunity to show you the DYNAMIC DATA option inside BREAKDANCE.

• When I hover over the label for the input field for the HEADING ELEMENT we are shown two icons.

The one on the right, is to access the Breakdance AI Plugin. This is an extra plugin that connects the Breakdance page builder to OpenAI. If you build websites for others one of the biggest challenges can be getting content from your friends or clients. It’s easy to underestimate just how much content is needed for a website and my personal experience is it can delay launch by weeks, months and in one case years. I’ve found BREAKDANCE AI plugin incredibly useful for creating site content as an aide to site builds BUT it is not a requirement for this course. It’s a great tool if you build a lot of sites but don’t worry about it if you don’t.

OK, after that slight diversion lets look at the other icon option when we hover over the INPUT LABEL for this ELEMENT. We get a DATABASE ICON.

• When I click on that icon BREAKDANCE gives me the option to INSERT DYNAMIC DATA as the input for this field.

Instead of having to manually add new data I can reuse something that’s already there.

• I’ll scroll through the Dynamic Data options until I get to Site Info
• I’ll choose the Site Title dynamic data option.

In the Heading Element Configuration panel the Text field has been replaced by the DYNAMIC DATA connection and the site title has been added to the header. This is a very basic use of inserting dynamic data but as you’ll see in future modules it’s a very powerful feature that’s going to save us a lot of set up work. Back to the header. Our Text logo is way too big.

• First I’ll change the tag to H3

Now I’ll make the Logo more prominent by changing the casing.

• In the DESIGN TAB then under TYPOGRAPHY I’ll click on ADVANCED and transform the text into UPPER CASE. 
• I’ll change the LETTER SPACING to 0.1 rem
• And the WORD SPACING to 0.5 rem

Make our HEADING Logo Responsive

Out HEADING Logo looks good on Desktop but what about other views?

Once we get out of DESKTOP our logo shifts to the centre of the page.

Lets stop our logo from centering on smaller screen sizes.

• From the STRUCTURE PANEL click on the HEADER BUILDER
• Go to the CONFIGURATION TAB for the element
• Click on the LAYOUT dropdown
• Change STACK VERTICALLY AT to NEVER

Now when we look at the header on smaller screen sizes it stays aligned to the left AND because we configured RATIOs inside Global SETTINGS > TYPOGRAPHY in the BRANDING module our HEADING LOGO automatically resizes on different devices.

Summary

In this lesson, you learned how to add a logo—either image-based or text-based—to your author website header using Breakdance. By linking the logo to your homepage and ensuring it is responsive across devices, you’ve created a key navigation element that enhances user experience and strengthens your brand. With this foundational step complete, you’re ready to move on to adding a menu to your website header.

In the next lesson

In the next lesson we will add our website menu.