How to change the WordPress Logo Size in Any Theme Easily10 min read

How to Change the WordPress Logo Size in Any Theme Easily?

In this post, I will tell you to step by step through the right way to change the WordPress logo size? in any WordPress theme.

Even if you’re using a theme that doesn’t let you change the logo dimension inside the customizer, this post will help you how to change the dimension of any logo in theme file through CSS. Let’s get straight to it!

How to Change Your Logo Dimension if You’re Theme Settings Don’t Enable It?

When you’re utilizing a theme like Divi, GeneratePress, Astra, or some other theme that allows you to modify the logo dimension within the customizer settings then congrats!

When you’ve already checked your settings and your theme doesn’t enable it then right here’s change the logo dimension utilizing CSS. Don’t fear, it’s straightforward if you happen to comply with my steps under.

Learn how to Change the WordPress Logo Size Using CSS

CSS stands for Cascading Fashion Sheet. Principally, it’s a language that tells the browser model completely different parts on a web page.

Let’s use CSS to vary the model of the logo dimension.

Step 1: Inspect the element

Right-click anyplace in your browser and also you’ll see one thing like ‘Examine’ or ‘Examine Factor’. Click on that to view the supply code of the web page.

Step 2: Click on the element highlighter

A window will pop up with an icon that appears like this. Click on it. This can spotlight all the weather on the page if you hover over them with the mouse.

Step 3: Be aware of the logo element

Hover your mouse over the brand and be aware of the text that pops up. That is the CSS class that we have to goal to vary the scale of the logo.

Step 4: Open the theme customizer

Then open the theme Customizer after which click on Extra CSS.

Step 5: Add some CSS code

Now add the next CSS code to regulate the scale of your logo:

.my-css-class img  
  max-height: 65px !vital;

And change .my-css-class with your personal CSS class that you simply discovered within the component highlighter.

As you may see within the above image, my CSS class is .site-title-wrapper, however, yours might be completely different relying on the theme you’re using.

When you’ve added the code, you need to see the logo change dimension. You possibly can modify the max-height worth to get the specified dimension of your logo.

Click on publish and also you’re finished!

The next tutorials will information you thru altering the brand dimension in a number of fashionable WordPress themes, though it’s a reasonably comparable course for any theme that enables it contained in the Customizer.

Learn how to Change the WordPress Logo Size in GeneratePress

Follow these steps to change the GeneratePress logo size.

Step 1: Open the theme customizer

In your WordPress Dashboard, click on the Theme Customizer.

Step 2: Click on Site Identity

Open the choice Web site Id contained in the customizer.

Step 3: Edit these settings

Disguise the location title, add your brand after which use the slider to pick your logo width.

Step 4: You can use the slider or type it in

I’ve chosen my brand dimension to be 250px, however, you may determine on whatever fits your web site greatest.

Step 5: Spacing options

Right here’s an instance of what my brand appears to be like like. When you have GeneratePress Professional, then additionally, you will have spacing choices above and under the logo.

Step 6: Click on Publish

Click on Publish and also you’re finished altering the brand dimension in GeneratePress.

Learn how to Change the WordPress Logo Size in Astra

Right here’s change the Astra theme brand dimension.

Step 1: Click the customizer

In your WordPress Dashboard, click on the Theme Customizer.

Step 2: Click on Layout

Then click on Layout contained in the customizer.

Step 3: Click on Header

Then click on Header.

Step 4: Then click on Site Identity

After which click on Web site Id to enter the brand settings in Astra.

Step 5: Edit these options

You’ll then see the Logo settings. Add your brand, select your Logo width, and uncheck the Display Web site Title field.

Step 6: Logo width slider in Astra

You should utilize the Logo Width slider or sort within the quantity within the field. I’ve set my logo width at 245px.

Step 7: That’s it!

Here’s what my brand appears to be like like after setting the width. Click on Publish to save lots of your modifications and also you’re finished.

Learn How to Change the WordPress Logo Size in Divi

And at last, right here’s change the Divi theme brand dimension.

Step 1: Click Theme Options

Within the WordPress Dashboard, click on Theme Options beneath the Divi settings.

Step 2: Add your logo

You’ll then see the Divi settings the place you may add your brand. Don’t neglect to save lots of your modifications.

Step 3: Go to the Theme Customizer

Then click on ‘Theme Customizer’.

Step 4

Then, click on ‘Header and Navigation’ > ‘Main Menu Bar’ to view the Divi logo settings.

That is the place Divi is barely different.

First, select the height of the header by selecting the ‘MENU HEIGHT’. I’ve set mine at 65px and then the ‘LOGO MAX HEIGHT’ is a share of the menu top.

So if you happen to select 100 then it’ll be the total top of the header with no house above and under. I’ve set mine at 80% so there’s a bit house.

Step 5: And you’re done!

Right here’s what my brand looks like with these settings. Click on Publish to save your modifications.

Conclusion

As you may see, it’s the right way to change the WordPress logo size and most themes achieve this in an identical means.

You can also use CSS code if your theme doesn’t have the settings to vary the brand size within the theme customizer.

If you like you can hire us for professional WordPress work and get a free quote.