Change the WordPress Logo Size in Any Theme

Change the WordPress Logo Size in Any Theme-getsocialguide

Change the WordPress Logo Size in Any Theme

In this post, I will tell you step by step through the right way to change the WordPress brand dimension 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!

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 allow’s you 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 which 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

Change the WordPress Logo Size in Any Theme 1

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

Change the WordPress Logo Size in Any Theme 2

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

Change the WordPress Logo Size in Any Theme 3

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

Change the WordPress Logo Size in Any Theme 4

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

Step 5: Add some CSS code

Change the WordPress Logo Size in Any Theme 5

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 of 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

Change the WordPress Logo Size in Any Theme 6

In your WordPress Dashboard, click on the Theme Customizer.

Step 2: Click on Site Identity

Step 2 - generatepress click site identity

Open the choice Web site Id contained in the customizer.

Step 3: Edit these settings

Step 3 - generatepress logo 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

Step 4 - generatepress logo width

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

Step 5: Spacing options

Step 5 - generatepress logo example

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

Step 6 - generatepress click publish to save

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

Step 1 - all themes click customize

In your WordPress Dashboard, click on the Theme Customizer.

Step 2: Click on Layout

Step 2 - astra click layout

Then click on Layout contained in the customizer.

Step 3: Click on Header

Step 3 - astra click header

Then click on Header.

Step 4: Then click on Site Identity

Step 4 - astra click site identity

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

Step 5: Edit these options

Step 5 - astra logo settings

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

Step 6 - astra logo width

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!

Step 7 - astra logo example

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

Step 1 - divi click theme options

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

Step 2 - divi add logo and click save

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

Step 3 - divi click theme customizer

Then click on ‘Theme Customizer’.

Step 4

Step 4 - divi logo settings

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!

Step 5 - divi logo example

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 easy to vary the logo size for WordPress 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.

Change the WordPress Logo Size in Any Theme 7