Search for a plugin or theme

How to Easily Change WordPress Logo Size in Every Possible Theme

How to Easily Change WordPress Logo Size in Every Possible Theme

In this article, I will show you how to change the WordPress logo size in every possible theme.

Your logo’s size has a strong impact on the way in which your websites’ visitors interact with your header. A logo that is too big will draw unnecessary attention while a logo too small will damage your brand recognition.

It will be impossible to walk you through each one of them. Instead, I will show you how to change the logo size in the most popular ones. On the other hand, if you aren’t using one of them, I’ll show you how to apply the right CSS rules that will target the rest of them.

How to Change WordPress Logo Size With CSS

What’s nice about CSS that it will work with every theme.

Moreover, with CSS, we just need to apply the desired rule to the desired element.

Because we are dealing with the logo, we need to target the logo element.

Here is the process: find the container class of the logo and add a custom CSS rule in the WordPress customization screen to manipulate the logo size.

Step 1: Find the logo class

In any browser (preferably Chrome), right-click anywhere on the screen and click on ‘inspect’.

Inspect Element

The console window will open up, don’t panic. It’s a developer tool and we only going to use it for a quick second to find the right logo class.

Step 2: Activate the element highlighter

Inside the console window, click on the element highlighter.

Element Highlighter

After clicking on it, it will highlight any element on your website that you’ll hover your mouse on.

Step 3: Hover your mouse on your website logo

You guessed it right. To find to logo class, hover your mouse on the logo image.

By hovering on the logo image, you’ll expose the logo class and size. Write down the class and dimension. We will need it shortly.

Get wordpress logo class

Step 4: Launch the WordPress customize screen

It’s better to enter the CSS rule in the style.css file of your child theme. If you don’t have a child theme, you can enter it in the WordPress customization screen as well.

Click on the Customize option in the admin menu bar.

Launch the customize screen

And then click on ‘Additional CSS’.

Chose the additional CSS option

Step 5: Enter the CSS rule

In the Additional CSS screen, we will need to enter our CSS rule to change the size of the logo.

Because we already found the logo class, we can now decide to make it smaller or larger based on our needs.

In our example, we can see that our logo width is 454 pixels. If we want to make it smaller we will need to enter a number smaller than 454, or larger than 454 if we want to make it larger.

The code below will make our logo width smaller. We reducing the logo width size to 200 pixels. The logo dimension will keep a relative ratio and the height will change accordingly.

img.custom-logo {
    max-width: 200px;
}

Paste the css code

In the code and image above we can see that we entered the class exactly as it appears when we inspected the logo element. As a result, the logo size will shrink.

Alternatively, if you would like to change the logo height instead of the logo width, use the max-height CSS rule like so:

img.custom-logo {
    max-height: 200px;
}

The codes above will work with the default Twenty-Twenty theme so if you’re using the same theme, go for it and give it a shot.

On the other hand, if you’re using a different theme, your logo class will be different. Just make sure to change the img.custom-logo class to your custom class and the size to your desired size.

After the change, just click publish and revisit your website to make sure it’s looking as expected.

As you saw, custom CSS rules are pretty flexible and can be used with any theme.

However, if you’re using a popular theme with many customization options, you can skip the CSS way and change the logo size easily through the theme customization screen.

The popular themes below have an easy way to adjust the logo size.

How to Change WordPress Logo Size in Specific Themes

The nice thing about the WordPress premium themes is the generous amount of customization options that they provide.

In this section, we will learn how to change the logo size in some of the most popular themes.

How to change WordPress logo size in GeneratePress theme

The first step is to launch the customization screen from the admin menu bar as we already did above.

After that, choose the Site Identity option.

GeneratePress theme site identity

There, you’ll have the option to increase or decrease the logo size by sliding the Logo Width option left or right.

Generatepress logo width slider

You will see the logo changing as you slide the slider.

When finished, click publish, and revisit your website.

How to change WordPress logo size in Astra theme

Adjusting the logo size in the Astra theme is very similar way to how we did it above and how we will do it with most themes.

Most of the time, the logo options are in the customization screen and the Astra theme is no different.

Thus, navigate to the customization screen from the admin menu bar.

Unlike the GeneratePress theme, here we will need to click on Header first and then on Site Identity.

Astra theme step one chose header

Then, under the site logo section, you’ll have a slider to control the logo size. Just slide it left or right to change the logo width.

Astra theme logo size slider

When ready, click publish, and revisit your website.

How to change WordPress logo size in OceanWP theme

Just like we did earlier, access your customization screen from the admin menu bar.

From the OceanWP sidebar, chose the Header option, and then Logo.

Oceanwp step 1 chose header

There, you’ll have two sliders. One for the logo width and the second for the logo height.

OceanWP logo size slicers

Slide it left or right based on your needs. Then, click on publish and revisit your website.

How to Change WordPress Logo Size Using Page Builders

How to change WordPress logo size in Divi

Changing the logo dimension with Divi is just a little bit different than with the other themes.

First, you’ll have to set the logo for your website by navigating to Divi -> Theme Options.

Under the General tab, click on the Upload button next to the logo field and upload your logo.

Upload logo to divi theme

Then, save the changes.

Now, click on Theme Customizer and it will take you to the customization tab. For some reason, Divi theme hiding the access link to the customization screen from the admin menu bar.

Divi theme customizer

There, click on Header & Navigation and then Primary Menu Bar.

In the primary menu bar screen, you’ll find the Logo Max Height slider to adjust the height of the logo. Remember, the logo image keeps its ratio so changing the logo height will also change the logo width.

Divi logo size sliders

Just slide it left or right until you reach the desired size and click ‘Publish’.

How to change WordPress logo size in Elementor

Changing the logo with Elementor is very easy.

The first step is to click on Edit With Elementor on the page or the header template that you would like to change.

Chose edit with elementor

Then, inside the Elementor edit screen, click on the element that you would like to change and navigate to the Style tab on the left side.

Adjust image size with elementor page builder

There, you’ll have two sliders, width, and max-width. Slide your desired one (or both) until the logo is resized and look how you want it. Then, just click on Update and revisit your website.

Conclusion

In this lecture, we learned how to resize your website’s logo in every theme. We used CSS or from within the customization screen of the themes themselves.

After adjusting the logo size, visit your website from different devices (tablets and mobiles) to verify it’s looking good there as well.

If the theme you’re using did not mention in this article, try to use the CSS method. If you already tried and couldn’t figure it out, write down below which theme you’re using and we will provide you with the right CSS code.

Please make sure to watch the video at the top of this page and leave us a comment down below if you have any questions.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply