How to Change WordPress Logo Size (For Any Theme)

change wordpress logo size

A logo is an important part of your website. It bears the identity of who you are and what business you do. You can change your WordPress logo any time you want, and you can also change the WordPress logo size. 

If you don’t know how to change WordPress logo size, I am here to help you. Depending on the website’s look, sometimes you have to make your logo bigger or smaller. Here, I will show you multiple processes step by step.

Let’s see. 

Method 1: Change WordPress Logo Size Using The Editor

In this method, you can directly change the logo size from the editor of your WordPress website.

Step 1: Open Editor

First, navigate to Appearance -> Editor.

Step 2: Edit Navigation

The site logo can be found at Site Navigation. Therefore, you can click on the navigation menu and then edit it. Or you can directly click on the visual part of your website.

Then click the logo area of your website and then click on ‘Edit template’.

Step 3: Edit Logo Size

Now again, click on the logo, and you will see a resizing slider on the icon. Drag the sliders and adjust the logo size.

When you are done resizing the logo of your website, hit the save button.

What do you do if there is no logo available?

If you don’t see any logo in the editor, then after step 2, click beside the site title, and the ‘Add block’ button will appear.

Click it and search for ‘site logo’. Insert the ‘site logo’ block by clicking on it. Then, resize and customize the logo as you require.

Method 2: Using The WordPress Customizer

There are several ways to change WordPress logo size; you can do it with custom CSS, with the help of a plugin, or by using the customizer. A plugin may slow down your website and installing a plugin for a single reason doesn’t make sense. Custom CSS might bring more trouble to you; therefore, using customizer is the best option. 

The process might differ a little according to the theme you are using. Here I am using the Astra theme. At first, navigate to Appearance -> Customize

Click on Header Builder and select Site Title & Logo

At here, you will be able to see your logo and settings regarding the logo. From the Logo Width slider, change the logo size according to your needs. 

You may change the size using the pixel. Adjust as you need and watch it on the live preview on the right side. When done, click on the publish button. 

Unable to find Site Title and logo? Well, if you can’t find then try to navigate in the header section of your customizer. In Divi theme, navigate to Header & Navigation -> Primary Menu Bar and then adjust logo size from Logo Max Height.  In other themes, you may get, Site Logo directly. 

Method 3: By Adding Custom CSS

Here’s how to adjust the logo size with CSS if you have tested the setup and your theme does not support it. If you follow my steps below, don’t worry, it’s fast.

CSS stands for Cascading Style Sheet. Basically, it’s a language that tells the browser on a website how to style various items.

To change the logo scale, let’s use CSS.

First, navigate to your website and right-click on anywhere. Click on ‘Inspect’. (I am using Chrome browser)

Now click on the element highlighter or the small cursor icon. Alternatively, you can directly press ‘Ctrl + Shift + C

Now hover the cursor over the logo and note the CSS class. 

At here CSS class is ‘img.custom-logo’. Depending on your website the class may vary. Now navigate to your WordPress dashboard and open your theme customizer. 

Now add the following code on Additional CSS. 

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

Here, I have set the max height as 80px. You can set the height as you desire. Once you are done, click on the Publish button to save your changes.

Related Posts:

Final Words

Hope now you will be able to change WordPress logo size very easily. If you still couldn’t change tell me, I will be happy to help you. If you find this post useful, then please share it with your friends, and don’t forget to leave your words in the comment section below. 

Leave a Reply

Your email address will not be published. Required fields are marked *

Introducing New Table Block Plugin - Tableberg

X
Need help?