Magnolia - Change Logo Size

Changing the size of the logo requires a few small code tweaks to the Magnolia theme.

If you are uncomfortable making these changes, please reach out to us and we can increase or decrease the size of your logo for $20.

Navigate to Appearance > Customize and click Additional CSS.

Copy and paste the following code:

.header-image .site-title > a {
min-height: 83px;

The number indicates the current height of the logo. Increase or decrease that number (leaving px at the end) until your logo is the size you’d like.

Click Publish.

If your logo looks blurry once that change is made, navigate to Appearance > Editor and choose functions.php from the list of files.

Note: If any mistakes are made in the following steps, you will get a white screen and no longer be able to access your site without the help of a developer or your web host.

Near the top of the file, find this piece of code:

//* Add support for custom header
add_theme_support( 'custom-header', array(
'flex-height' => true, 'width' => 301,
'height' => 85,
'header-selector' => '.site-title a',
'header-text' => false, ) );

Change the number 301 to be the width that you’d like your logo to appear at. Change the number 85 to be the height that you’d like your logo to appear at.

Click Update.

Navigate to Appearance > Header and re-upload your logo.

Still need help? Contact Us Contact Us