How to Increase Theme Logo Size

This document will help you change the logo size for:

• Zelle
• Hestia

NOTE: Unless you are using a child theme, all the CSS code snippets from this guide need to be added to Appearance -> Customize -> Additional CSS.

NOTE: If you plan on doing a lot of changes on the theme, then we encourage you to create a child theme and add the following snippets inside the style.css file of your child theme. 

These docs should help you create a child theme:

• How to create a child theme - this doc uses Zelle Pro as an example
• How to create a child theme for Hestia - this doc contains a pre-made child theme .zip file for Hestia

How to increase the logo size for Zelle

Add the following code to Appearance -> Customize -> Additional CSS or inside your style.css file of your child theme:

.navbar-brand {
    height: 130px;
}
.navbar-brand > a > img{
    max-height: 120px;
}

The first part will increase the height of the parent element to make room for the logo to grow. The second part is increasing the size of the actual logo.

You can increase or decrease the height and max-height values according to your preferences.

How to increase the logo size for Hestia

Add the following code to Appearance > Customize > Additional CSS or inside your style.css file of your child theme:

.navbar .navbar-header .navbar-brand img {
    max-height: unset;
    width: auto;
    height: auto;
}
.navbar .title-logo-wrapper {
    max-width: 350px;
}

This snippet will take care of increasing the logo size in Hestia. The final size can be adjusted by changing the 350px value.