Search for a plugin or theme

Search
Generic filters

How to Easily Change WordPress Logo Size in Every Possible Theme

You are currently viewing How to Easily Change WordPress Logo Size in Every Possible Theme

This article will show you how to change the WordPress logo size in every possible theme.

Your logo’s size substantially impacts how your website’s visitors interact with your header. A too-big logo will draw unnecessary attention, while a too-small logo will damage your brand recognition.

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

How to Change WordPress Logo Size With CSS

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

Moreover, we must apply the desired rule to the selected element with CSS.

We need to target the logo element because we are dealing with the logo.

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

Right-click on the screen in any browser (preferably Chrome) and click on ‘inspect.’

Inspect Element

The console window will open up, don’t panic. It’s a developer tool, and we will only use it for a quick second to find a suitable 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’s logo

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

You’ll expose the logo class and size by hovering on the logo image. Write down the class and dimensions. 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’s theme.

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’re going to make it larger.

The code below will make our logo width smaller—we are 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 appeared 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, your logo class will be different if you use a different theme. Just make sure to change the img.custom-logo class to your custom class and the size to your desired size.

Once changed, click publish and revisit your website to ensure it looks 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 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 they provide.

This section 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

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 similar to how we did it above and how we will do it with most themes.

The logo options are on the customization screen most of the time, and the Astra theme is no different.

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

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

Astra theme step one chose header

Then, you’ll have a slider to control the logo size under the site logo section. 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

Access your customization screen from the admin menu bar as we did earlier.

From the OceanWP sidebar, choose the Header option and then the 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 Theme Customizer, which will take you to the customization tab. For some reason, the Divi theme hides 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 Edit With Elementor on the page or the header template you want to change.

Chose edit with elementor

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

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, click on Update and revisit your website.

Related Articles

We wrote many articles on how to improve your website’s header differently. Keep improving your conversion and user experience by reading the content below:

Conclusion

This lecture taught us 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 also looking good there.

If the theme you’re using was not mentioned in this article, try using 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 proper CSS code.

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

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

PluginsForWP

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

This Post Has One Comment

  1. Christina

    Can you please explain how to change the logo size on the Barlow theme?

Leave a Reply


Get notified about new content and coupon codes!

JOIN OUR COMMUNITY OF 120,000+ WORDPRESS ENTHUSIASTS