Logos are a big part of any brand's identity. Seeing the logo of a company you like helps you instantly create a connection and trust with the product. The same thing goes with the logo on your website. Every website that you visit will have their logo on almost all the pages and posts they publish.
One of our previous quick tips covered how we can change the logo on a WordPress website. Our goal in this one is to change the logo size.
Before We Get Started
Logos provide people an easy way to add brand identity to your website. Therefore, almost all themes have the option to change a logo using the customizer from the WordPress admin dashboard. However, the same is not true for changing the logo size. This basically means that you might need to do a little more work to get it done.
There are a lot of ways to change the logo size in a WordPress website but we will limit ourselves to just two methods which are beginner friendly and don't require you to do a lot of tinkering with the website code.
Lets start with the easy one!
Changing the WordPress Logo Size with Built-in Settings
Some premium theme developers will provide you an out-of-box solution for changing the size of logo on your WordPress website. We will learn how to do that with an education theme called Eduma available on ThemeForest.
The first step is to visit Appearance > Customize from the WordPress admin dashboard after you have logged in to the backend.
Now we look around a bit to see available menu options and figure out which of them could have the logo settings we need. The General menu seems like a good candidate so we click on it.
Click on Logo in the next list of menu items that appear on screen. Then, you should see some options to change the logo as well as its size. This particular theme allows us to configure a number of things like providing different images for the regular and sticky version of the logo.
You should see something like Logo Width or Logo Height if you scroll down a bit in your settings as well. In our case, we set the value of Logo Width to 60%. Any changes you make will reflect right away on the website preview so you can undo any changes you don't like.
Changing WordPress Logo Size with Custom CSS
This method of changing the WordPress logo size requires a little bit more work but it also gives you more control. Ideally, you should consider using it only if your theme doesn't have any option to directly change the logo size within the customizer settings.
We will use the WordPress Twenty Twenty-One theme as an example here but the same steps will work for every theme that you have.
The first step here is to find out which CSS selector is used by the theme to target the logo on your website. To do so, just visit any page on your website and then right click on the logo. Click on Inspect in the context menu.
This should open up the developer tools in the browser and you should see code something like the image below. Find the CSS selector which specifies the width and height of the logo. It's important to find the selector where none of these properties are crossed out—when the properties are crossed out, that means they are overridden by another selector further up the list.
The highlighted selector will work perfectly in our case.
Try playing around with these values to figure out the right logo size for your website. Two things that you should keep in mind here.
One, it is a good idea to avoid setting both width and height values for the logo. This could result in forceful stretching of the logo ruining its design.
Two, just setting a width or height value might not always change the logo size. This is usually because those values might be restricted to a certain maximum size due to the max-width and max-height properties. For example, setting the logo width to 600px won't work if the value of max-width is 300px. You will need to make changes to both max-width and max-height in this case. The image below shows our values.
Now comes the part where we make changes to the logo size. Go to the theme customizer in the WordPress admin dashboard by navigating to Appearance > Customize.
You should see a menu item called Additional CSS. Click on it.
Now paste the selector and CSS properties that you changed earlier into this box and hit the Publish button.
This should update the size of the logo on the website.
Final Thoughts
We learned two different methods of changing the logo size in WordPress in this tutorial. The first method is easier to use and should be preferred if your theme supports the functionality. There is a good chance that the theme developers included some built-in checks to make sure any extreme changes to logo size don't affect the layout.
The second method is a little more complicated but it is almost always guaranteed work as long as you choose the selectors carefully. Make sure you test the final layout on different devices to confirm that there are no unexpected shifts in positions of different elements.
The premium themes from ThemeForest come with free support for six months. Take a look at over 11,000 themes listed on ThemeForest to choose the one that best meets your needs.
If you need help picking a theme, check out our curated lists of the best themes on ThemeForest!
No comments:
Post a Comment