How To Change Logo Size In Wordpress

How to Change Your WordPress Logo Size

August 25. 2021

When designing their website a lot of people wonder whether they could change their logo size. In certain instances doing and so makes clear sense, as logos can be overbearing. Well, to help yous out, nosotros will requite 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 only don't. So, we volition give yous unlike methods that you tin can use, both for those that utilize CSS and for those that don't.

Method 1: Using WordPress customizer

The easiest way to modify the size of your logo in WordPress is by using the WP customizer. The merely downside is that not all themes support information technology. Popular themes similar 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 utilise method 2 or 3.

WordPress themes on a screen. — You lot tin can change your WordPress logo size no affair what theme you are using.

Divi theme

The first affair you lot need to do is to head to the Divi -> Theme Customizer. There you demand to open up the "Header & Navigation" menu and click on the "Primary Menu Bar" option. Information technology is here where you lot will change the size of your logo. The get-go matter to practise is to accommodate the "Bill of fare Summit" setting. Past doing so yous alter the top of your navigation carte du jour, which in plow will define how big your logo can be. Once you do that, you can alter the "Logo Max Summit" setting, which is defined by the per centum of the full card height. One time you've adjusted the logo size, just make sure to click the "Publish" button so that your changes have effect.

Astra theme

If you lot are using the Astra theme, the process is a fleck different. Here yous beginning need to head to the Appearance -> Customize and click on the "Header" pick. Once you do that, head on to the "Site Identity" menu option. At that place you lot can easily adjust the size of your logo by using the Logo Width slider. Doing and so will change logo size in real-time. In one case you are satisfied with the logo size, click the "Publish" button to save your changes.

Ultra theme

In a similar way, the Ultra theme is quite like shooting fish in a barrel to navigate. In it, you first become to Appearance -> Customize and then click the "Site Logo & Tagline" choice. Once you practice that, click on the "Site Logo" drop-down selection and select the "Logo Image" radio button. The mode y'all change the logo size here is past inbound the dimensions into the boxes next to the logo prototype. If you enter dimensions into only one box, the logo volition scale based on the original dimensions. The left box is for width and the right box is for tiptop. Similar to the Astra theme, the logo size will change in real-fourth dimension. Once you are satisfied, click the "Publish" button to save changes.

Method ii: Editing CSS

As we said, not all themes support the WP customizer. If that is your case, y'all 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 accept to practise is precisely follow instructions.

CSS can seem intimidating before you start using it.

The get-go matter to practise is to head to the homepage. One time you lot are there click the right click anywhere on your website. From the carte, select the "Inspect" option. Doing so will open the Inspect menu where y'all tin can see all the lawmaking related to the page. On the acme right corner, you will see a small icon that looks like the mouse pointer. Past clicking it, you will select the logo element of your website and view the related lawmaking. Next, you lot need to hover over the website logo until the CSS class pops up. Once it does, you lot can utilize it to alter the size of your logo. Just brand sure to write it down in Notepad.

The next thing to do is to caput to the Appearance -> Customize. Once you are there, click the "Aditional CSS" option. By doing so you will bring upwardly a drop-down window where you can enter your CSS code. In this window, you need to re-create/paste the class that you've saved in Notepad (the logo course). Later on you've done so, you tin specify the logo dimensions. You lot can utilize the following lawmaking as an example:

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

In one case you've fabricated your changes, just make sure to click the Publish button in club to save them.

Method 3: Using CSS Hero

If y'all neither take the necessary themes for using WP customizer. Nor do you wish to add CSS code (even though yous can easily remove it), there is yet a way to modify your WordPress logo size. Namely, you lot can use CSS Hero, a WordPress styling plugin.

Once you've downloaded and installed it you demand to click the "Proceed to Product Activation" button. There you can activate your plugin by simply following the outlined guidelines.

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

After you've activated CSS Hero, you need to click the "Customize CSS Hero" push button. You tin find it at the meridian of your screen in the WP admin toolbar. By clicking it you will be redirected to your website which CSS Hero running on acme of information technology. The not bad thing well-nigh CSS Hero is that it uses the What You See Is What Yous Become (WYSIWYG) organization, which makes it quite like shooting fish in a barrel to use. Now you tin click on any element of your folio (including your logo) and go a toolbar that helps you lot edit information technology.

One time you've clicked on your logo yous need to select the "Evidence Advanced Props" link. In the added CSS options y'all demand to select the "Measures" box. There you can utilize the "Max Width" and "Max Pinnacle" options to change the size of your logo. Once you are satisfied, click the "Salvage and Publish" option to salve your changes.