The logo is one of the most important parts of the website, and it should always be of an appropriate size, not so large that it attracts unnecessary attention or affects the aesthetics of the website design, and not so small that it does not express your brand.
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 aesthetically and clearly in the header of the site in more than one different way that suits the template you rely on.
It is possible to change the logo of a WordPress site in many ways, whether through the customization settings that are included in some templates and also through the use of CSS codes, and in the following lines I will take you on a journey to learn about each method separately to be able to change your site’s logo in all circumstances.
Ways to modify the size of the website 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 a lot of the steps you have to do if you have that.
1. Change the logo size through the template
There are many templates that provide the ability to directly modify the logo size, including the Astra template, which comes with an option that allows you to control the logo size, through its settings as follows:
After installing and activating the template , go to the WordPress control panel, then select the Appearance << Customize option
After that 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. After adjusting the size of the logo, do not forget to click Publish at the top of the window, as in the following animation:
Note: Each template comes with different steps and tools to modify the logo size, but the previous steps are similar in most templates.
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 CSS codes, by going to the site’s home page, after that you have to right-click and then scroll down to click on Inspect .
Click 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 to hover over the logo to identify its code within the template codes. The code here will most likely be img.custom-logo or another name that expresses it.
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. 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:
In the end , 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. The method integrated into the template will be easier for you if the template already provides it, but if the template does not provide it, the option to customize the CSS will be easy. .
