Harper - Change logo/header size

The logo/header size in Harper is 800x300px (displays at half that size, 400x150px, on your live website). If you would like to use a larger or smaller logo, follow the instructions below:

Before making any edits to your Functions.php file, please make sure that you have access to the File Manager in your cPanel or FTP. The Functions.php file is incredibly sensitive and if a mistake is made, it can cause the "white screen of death" on your site. Having easy access to your File Manager means you can easily upload a fresh copy of the Functions.php file if the need arises.

1. First, determine what size you would like your logo to display at. In this example, we will assume you want your logo to display at 1000x500px. Since the Harper theme supports a retina logo, you will need to save your logo image at TWICE the size you want it to display at. So in our example, that would mean:

Desired display size on your website = 1000x500px

Save your logo image as = 2000x1000px

Note: The ENTIRE logo should be doubled in size. Do not just add white space while keeping your logo small. Your logo should appear very large at the doubled size — remember, it will display at half that size when you're finished!

2. In your WordPress dashboard, go to Appearance > Editor > Functions.php.

3. Locate the "Add Support for Custom Header" section in the Functions.php file. If you can't find it, click inside the code box and press Command/Ctrl + F to search.

4. Change the width and height values to match your LOGO FILE dimensions (this is the doubled size referenced above). In the example we are working with, you would use 2000 for the width and 1000 for the height.

5. Go to Appearance > Editor > Style.css. Press Command/Ctrl + F and search  .header-image .site-title > a

6. Find min-height in that section and change the 150px value to your DISPLAY HEIGHT. In our example, this would be 500px.

7. The section right below is  .header-image .title-area. In that section, find max-width and change the 400px value to your DISPLAY WIDTH. In our example, this would be 1000px.

8. Click Update File to save your changes.

9. Upload your new logo image at Appearance > Header. If your new logo looks blurry or squished, you may need to clear your browser cache so that the Style.css changes can take effect.

If there is too much white space around your logo after changing the dimensions, click here for instructions on adjusting the margins.