ur site’s logo is one of the most important parts of the website, and it must always be of an appropriate size, not so large that it covers the content of the site, and not so small that it leads to insufficient display of the site’s visual identity.
In this article, we will discuss how to change the size of the site logo, so that it is suitable for it to appear more streamlined in the site header .
Ways to size your website logo
It is possible to change the WordPress website logo in many ways, both through customization settings included in some templates and also through the use of CSS codes.
1- Modify the size of the site logo from the template settings
There are some templates that come with settings to customize the site logo, and this will make it easier for you and simplify many of the steps that must be taken if this is available. We will take the Astra template as an example, as it comes with an option that allows you to control the size of the logo through its settings. Let us explain this as follows: follows:
First, go to the WordPress control panel, then select the ( Appearance) tab , and then click ( Customize).
Then click on the top bar option
Then click on Site ID
After that, you will be able to change the size of the logo by swiping right and left on the customization bar, then after adjusting the size of the logo to the appropriate size, click on the (Publish) button at the top.
Knowing that each template comes with different steps and tools to modify the logo size.
2- Modify the size of the website logo through CSS
If your template does not come with settings that allow you to modify the WordPress site logo, you can do so using custom CSS code, by going to the site’s home page, then right-clicking and then scrolling down to select the Inspect option.
Then click on the Select Items option, shown as a mouse cursor at the top left of the window. Or you can use the following shortcut ctrl+shift+c.
The next step is for you to hover over the logo to identify the class of the logo within the template codes, and Class is here in this example img.custom-logo
After that, you must open a code-editing program, such as Notepad or Sublime Text, to be able to customize the code to the logo size you want. To be in the following form:
All you have to do is add the logo code, which is in the template installed img.custom-logo, and then specify the length of the logo you want, by changing the value to 200px , and this image is from within the code editor.
Now, copy the code, and you should head to the WordPress control panel. Then select Appearance and then click Customize .
Scroll down and click on Additional CSS .
After that, paste the code in the field designated for CSS codes
And control the length or height of the logo by changing the value within the code.
You can also control the display of the logo through the following code:
Read also: How to add custom CSS code to your WordPress site
Read also: An explanation of HTML and CSS and how to use them and modify their codes completely
Thus, this was the way to change the size of the site logo, whether through the template settings or by entering a CSS code that contains the size of the logo you want.
