Recently one of our readers asked if it was possible to change your logo size in WordPress?
Your website logo is an important part of your brand. Depending on the WordPress theme you use, sometimes it’s not clear on how to change your logo size to make it bigger or smaller.
In this article, we’ll show you how to easily change the WordPress logo size , step by step.
Why Change the Size of the Logo in WordPress?
When you upload your logo to WordPress, it might not always be the right size.
A logo that’s too small won’t stand out. While, a logo that’s too big can end up negatively impacting the design of your website.
If you’ve invested in a custom logo design, then you want to make sure your logo appears as the right size in your website header.
For those still in the logo design process, see our picks of the best free logo makers.
That being said, we’ll show you a few different ways that you can use to change the logo size in WordPress.
The method you choose will depend on the WordPress theme you are using, and your comfort level with editing CSS code.
- Change the WordPress logo size with WordPress customizer
- Change the WordPress logo size by editing CSS code
- Change the WordPress logo size without editing CSS code
Method 1. Change the WordPress Logo Size with WordPress Customizer
The simplest and easiest way to change the logo size in WordPress is by using the theme customizer. However, this method only works if your WordPress theme supports it.
A lot of popular themes like Divi, Astra, Ultra, and others have a built-in logo size changer tool.
When you upload your logo in WordPress, these themes make it easy to adjust the logo with a simple slider that you can use to adjust the width and height.
Note: your logo size will only be as big as the image you upload, so you want to make sure you upload a larger logo image, if your goal is to make it bigger.
For the sake of the tutorial, we’ll be showing how to change your logo in Divi, Astra, and Ultra theme, but the method is similar for most popular WordPress themes. If your theme doesn’t have this option, then you need to use the method 2 or 3 of this tutorial.
Change the WordPress Logo Size in Divi WordPress Theme
First, navigate to Divi » Theme Customizer and click on the ‘Header & Navigation’ menu option.
After that, click the ‘Primary Menu Bar’ drop down option.
Here you can change the size of your logo.
First, you need to adjust the ‘Menu Height’ setting. This controls the height of your entire navigation menu and will define how big you can make your logo.
After that, you can change the ‘Logo Max Height’ setting, which is a percentage of the total menu height.
You can adjust the ‘Logo Max Height’ slider up and down until you find the perfect logo size for your WordPress blog.
Make sure to click the ‘Publish’ button to save your changes before exiting the screen.
Change the WordPress Logo Size in Astra WordPress Theme
First thing you need to do is navigate to Appearance » Customize and then click the ‘Header’ menu option.
After that, click the ‘Site Identity’ menu option.
Here you can easily adjust the size of your logo.
All you have to do is move the ‘Logo Width’ slider to the left or right.
You can automatically see your logo size changes in real time, as you move the slider.
Once you’re satisfied with the size of your logo, make sure to click ‘Publish’ before exiting the page.
Change the WordPress Logo Size in Ultra WordPress Theme
To customize the logo size in Ultra theme, navigate to Appearance » Customize, and click the ‘Site Logo & Tagline’ navigation item.
After that click the ‘Site Logo’ drop down.
Then, select the ‘Logo Image’ radio button that appears.
Now, you can change the size of the logo by entering new dimensions into the boxes to the right of your logo image. If you want the image to scale based on the original size, then only enter new logo dimensions into one box.
You can change the width with the box on the left, and the height with the box on the right.
As you enter new dimensions, you’ll see the size of your logo change in real time.
Once you’re done customizing the size of your logo, make sure to click the ‘Publish’ button.
If your theme isn’t highlighted above, then there’s still a chance that you can customize the size of your logo by using the WordPress customizer.
Simply go to Appearance » Customize on whatever theme you are using and see what customization options are available for your logo or header.
Method 2. Change the WordPress Logo Size by Editing CSS
If your WordPress theme doesn’t support changing the logo size using the WordPress theme customizer, then you can change the size by adding custom CSS.
First thing you need to do is navigate to your website homepage.
Then, right-click anywhere on the page and select the ‘Inspect’ option. This will bring up an Inspect menu that shows all of the code for the page.
After that, you need to click the ‘Select an element’ icon that looks like a mouse pointer.
This will let you select the logo element of your website and view the code.
Next, simply hover over your website logo until the CSS class pops up. It will look similar to the image below.
You’ll use this CSS class to customize the size of your WordPress logo. So, write this down in a text editor like Notepad.
Now you can head back to your WordPress admin dashboard and navigate to Appearance » Customize. You need to click the ‘Additional CSS’ menu option.
This will bring up a drop-down where you can add custom CSS code.
Simply add the CSS class you found earlier and specify the new image dimensions. You can use the CSS code below as an example.
img.custom-logo {
max-height: 100px !important;
}
You need to change the img.custom-logo CSS class above to the CSS class your theme uses.
You can also change the max-height to whatever size you want.
Here is how it looks inside the WordPress customizer.
Once you’ve made your changes, simply click the ‘Publish’ button to make your changes live.
Method 3. Change the WordPress Logo Size Without Editing CSS
If you aren’t comfortable editing theme files or adding custom CSS, then this method is for you.
By using a WordPress styling plugin, you can make visual changes to your site similar to using a drag and drop page builder.
We recommend using CSS Hero. It’s a styler plugin that lets you edit almost every CSS style on your WordPress site without writing a single line of CSS code.
Deal: WPBeginner reader’s can get a 34% discount through our CSS Hero coupon code.
First thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to click the ‘Proceed to Product Activation’ button to activate the plugin. It’s located right above your list of installed plugins.
This will bring you to a screen where you can enter your username and password. Simply follow the on-screen instructions, and you will be redirected back to your site once your account is verified.
After that, click the ‘Customize with CSS Hero’ button at the top of your WordPress admin toolbar.
This will take you to your website with CSS Hero running on top of it. CSS Hero uses a WYSIWYG (What You See Is What You Get) editor.
When you click on any element of your page, it will bring up a toolbar on the left to make customizations.
Next, click on your WordPress logo at the top of the page.
After that, click the ‘Show Advanced Props’ link.
This gives you even more CSS customization options.
Then, locate the ‘Measures’ box. Here you’ll find options called ‘Max Width’ and ‘Max Height’.
You want to change these to the image size you prefer. If you want the image to keep the same dimensions, then only change the height or the width.
The changes you make will show up automatically on your page.
Once you’re done changing the size of your logo, you need to click ‘Save and Publish’ to make your changes live.
We hope this article helped you change your WordPress logo size. You may also want to see our expert picks for the best live chat software for small businesses, and our list of the must have WordPress plugins for business websites.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Change Your WordPress Logo Size (Works with Any Theme) appeared first on WPBeginner.
Source: WPBeginner