How to Change Your WordPress Logo Size

When designing their website a lot of people wonder whether they could change their logo size. In certain instances doing so makes clear sense, as logos can be overbearing. Well, to help you out, we will give you three easy ways to change your WordPress logo size.

Change your WordPress logo size

While we recommend that every WordPress designer at least has the basic knowledge of CSS, we understand that some simply don’t. So, we will give you different methods that you can use, both for those that use CSS and for those that don’t.

Method 1: Using WordPress customizer

The easiest way to change the size of your logo in WordPress is by using the WP customizer. The only downside is that not all themes support it. Popular themes like Astra, Divi, or Ultra all support WP customizers. This is why our first method will rely on the Divi theme. But, if you are using a custom WP theme, we suggest that you either use method 2 or 3.

WordPress themes on a screen.
You can change your WordPress logo size no matter what theme you are using.

Divi theme

The first thing you need to do is to head to the Divi -> Theme Customizer. There you need to open the “Header & Navigation” menu and click on the “Primary Menu Bar” option. It is here where you will change the size of your logo. The first thing to do is to adjust the “Menu Height” setting. By doing so you alter the height of your navigation menu, which in turn will define how big your logo can be. Once you do that, you can alter the “Logo Max Height” setting, which is defined by the percentage of the total menu height. Once you’ve adjusted the logo size, just make sure to click the “Publish” button so that your changes take effect.

Astra theme

If you are using the Astra theme, the process is a bit different. Here you first need to head to the Appearance -> Customize and click on the “Header” option. Once you do that, head on to the “Site Identity” menu option. There you can easily adjust the size of your logo by using the Logo Width slider. Doing so will alter logo size in real-time. Once you are satisfied with the logo size, click the “Publish” button to save your changes.

Ultra theme

In a similar fashion, the Ultra theme is quite easy to navigate. In it, you first go to Appearance -> Customize and then click the “Site Logo & Tagline” option. Once you do that, click on the “Site Logo” drop-down option and select the “Logo Image” radio button. The way you change the logo size here is by entering the dimensions into the boxes next to the logo image. If you enter dimensions into only one box, the logo will scale based on the original dimensions. The left box is for width and the right box is for height. Similar to the Astra theme, the logo size will change in real-time. Once you are satisfied, click the “Publish” button to save changes.

Method 2: Editing CSS

As we said, not all themes support the WP customizer. If that is your case, you might need to resort to using CSS. While this may sound scary, trust us that the actual process is quite straightforward. You can even add your logo through CSS. All you have to do is precisely follow instructions.

A laptop with CSS, showing how to change your WordPress logo size.
CSS can seem intimidating before you start using it.

The first thing to do is to head to the homepage. Once you are there click the right click anywhere on your website. From the menu, select the “Inspect” option. Doing so will open the Inspect menu where you can see all the code related to the page. On the top right corner, you will see a small icon that looks like the mouse pointer. By clicking it, you will select the logo element of your website and view the related code. Next, you need to hover over the website logo until the CSS class pops up. Once it does, you can use it to change the size of your logo. Just make sure to write it down in Notepad.

The next thing to do is to head to the Appearance -> Customize. Once you are there, click the “Aditional CSS” option. By doing so you will bring up a drop-down window where you can enter your CSS code. In this window, you need to copy/paste the class that you’ve saved in Notepad (the logo class). After you’ve done so, you can specify the logo dimensions. You can use the following code as an example:


img.custom-logo {
max-height: 100px !important;
}


Once you’ve made your changes, just make sure to click the Publish button in order to save them.

Method 3: Using CSS Hero

If you neither have the necessary themes for using WP customizer. Nor do you wish to add CSS code (even though you can easily remove it), there is still a way to change your WordPress logo size. Namely, you can use CSS Hero, a WordPress styling plugin.

Once you’ve downloaded and installed it you need to click the “Proceed to Product Activation” button. There you can activate your plugin by simply following the outlined guidelines.

WordPress logo.
As it is with most things in WordPress, plugins can do wonders.

After you’ve activated CSS Hero, you need to click the “Customize CSS Hero” button. You can find it at the top of your screen in the WP admin toolbar. By clicking it you will be redirected to your website which CSS Hero running on top of it. The great thing about CSS Hero is that it uses the What You See Is What You Get (WYSIWYG) system, which makes it quite easy to use. Now you can click on any element of your page (including your logo) and get a toolbar that helps you edit it.

Once you’ve clicked on your logo you need to select the “Show Advanced Props” link. In the added CSS options you need to select the “Measures” box. There you can use the “Max Width” and “Max Height” options to change the size of your logo. Once you are satisfied, click the “Save and Publish” option to save your changes.

 

Newsletter