Magnolia - Change logo/header size

The logo/header size in Magnolia is 800x300px. The logo displays at half that size (400x150px) on your live website, to ensure the logo does not display blurry on retina devices. 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 1000x400px. Since the Magnolia 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 = 1000x400px

Save your logo image as = 2000x800px

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 800 for the height.

5. Go to Appearance > Customize > Additional CSS. Paste the following code:

@media only screen and (min-width: 1021px) { 
    .title-area {
        max-width: 1000px;
    }
    .header-image.header-full-width .site-title > a {
        min-height: 400px;
    } }

Replace the first number (1000px) with your DISPLAY WIDTH. Replace the second number (400px) with your DISPLAY HEIGHT.

6. Still in the Customizer, go to the Header tab and upload your logo image. Remember that you need to upload the logo with the DOUBLED DIMENSIONS - the dimensions that you inputted in step 4.

7. Click Publish to save.

But what about the split navigation menu?

The above tutorial assumes you are NOT using the split navigation menu that displays on the left and right of the logo. If you would like to change your header size and keep the split navigation, follow the instructions above, and then continue below:

When using the split navigation and a logo together, we recommend keeping the logo display width at 600px or below.

Go to Appearance > Customize > Additional CSS. Paste the following code:

.header-image .site-header .header-right,
.header-image .site-header .header-left {
    width: 25%; }

You will want to play around with the width value to see what looks best. Larger number = closer to the logo. Lower number = farther from the logo, but also less space for the menu to take up. The "right" number for you will depend on the size of your logo and how many navigation links you have in each menu.