How do I add my logo to the header?

Let's cover a few best practices before we jump in and I show you how to add your logo.

Good ideas:

• Create two versions of your logo for light and dark backgrounds.
• Save logo files as PNG or SVG files with a transparent background.
• If using a PNG file, optimize the size so it's no larger than 600px

Now that we've got that out of the way, let's move on to the fun stuff.  First, it's important to know that with Clean Pro, you can upload two types of logos that will work on different backgrounds. 

Let's get into it!

First, go ahead and edit any of the website pages you have set up and connected to the child theme you are using.

1) Open the Contents tab and click the Global Header module.

You'll need to click it a second time when after you click the Open in Global Content editor button.

2) Then Click into the Start Here section of the module.

Scroll all the way down and you'll see the Logo sub-section.

3) Upload two versions of your logo.

You'll see there are two places to upload a logo. 

• Standard logo
  This is the version of the logo that will be at the top of the page when someone scrolls to the top.
• Sticky logo
  This is the version of the logo that displays as someone scrolls down the page.

Again, I suggest that you create light/dark modes of your logos to give you a ton of flexibility. Don't worry, there is a cool feature in the Header Footer Overrides module where you can select which logo you want to display as the default when someone is scrolled to the top.

4) Adjust the size of the logo

Under each logo, you'll see a slider to set the width of the logo for both Desktop and Mobile. You'll want to use this setting instead of adjusting the width and height of the logo image directly. You can also set the size of the Sticky logo if you'd like to make it smaller as someone scrolls down the page.

5) Set the link for when the logo is clicked.

By default, this will be set according to what you have set up in your HubSpot BrandKit.  However, you can set a custom link directly from the module.

Great work, you're done!