How to Change Logo Size in Twenty Twenty One Theme in WordPress

How to Change Logo Size in Twenty Twenty One WordPress Theme

Today I’ll show you how you can change the Logo Size in Twenty Twenty One WordPress Theme easily using custom CSS or a WordPress plugin.

The steps are very simple and easy. You can easily change the logo size of your WordPress website using the twenty twenty one theme with the help of this tutorial.

Change Logo Size using Custom CSS

Using Custom CSS is the recommended method as it works like charm and doesn’t add any bloat to your WordPress website, now before starting the tutorial make sure that you have a backup of your website just to be on the safer side.

Once you have made your backup, go to Appearance > Customize. Inside the Customizer go to Additional CSS.

Here in the Additional CSS box, enter the CSS code given below.

.site-logo .custom-logo {
    max-width:5000px;
    max-height:5000px;
    width:500px;
    height:300px;
}

After you have copy-pasted the CSS code in additional CSS you will need to change some things in the CSS code. The only things you will need to change will be the width and height, don’t change anything in max-width and max-height.

change width and height in customizer

In width enter the width you want your logo to have, just change 500px to anything that looks good on your site, like 200px or 250px, etc. 

In height enter the height you want your logo to have, just enter anything that looks good on your site. Once you have got your desired height and width click on the publish button at the top of your WordPress customizer.

This will save the changes, after that go to your website and refresh the page. That is how you can change the logo size in twenty twenty one WordPress theme using custom CSS.

Change Logo Size using WordPress Plugin

Now if you don’t want to use CSS and want to use a plugin instead then there’s one plugin that you can use for changing the logo size. The plugin is called “Options for Twenty Twenty-One”.

Go to Plugins > Add Now, there in the search bar search for “Options for Twenty Twenty-One”, install and activate the plugin by developer WebD Ltd. You can also download and upload the plugin by downloading it from – https://wordpress.org/plugins/options-for-twenty-twenty-one/.

install and activate options for twenty twenty one plugin

Once the plugin is installed and activated, go to Appearance > Customize. Inside the Customizer go to Header Options.

Scroll down in header options until you see logo size, now in the logo size setting all you need to do is use your mouse to move the dial to change the logo size. Move it right to increase the logo size and move it left to decrease the logo size.

change logo size using options for twenty twenty one plugin

Once you have got your desired logo size, click on the publish button to save the changes. After that go to your website and refresh the page.

That’s it, that is how you can change the logo size in WordPress twenty twenty one theme using custom CSS or using a WordPress plugin. If you need any help then comment below. Thank you.

How to Change Logo Size in Twenty Twenty One Theme in WordPress

FAQ -

How to change logo size in Twenty Twenty One theme in WordPress?

You can change the Logo size in Twenty Twenty one theme using custom CSS or using a WordPress plugin. There is no option to change the logo size by default in the twenty twenty one theme, you will have to use CSS and plugins for that.

Is it Safe to change Logo size in twenty twenty one theme using custom CSS?

Yes, it is completely safe to change the logo size in twenty twenty one WordPress theme, if you don’t want to take a risk of breaking anything on your website then you can use a website backup plugin and take a backup of your website.

That way if something goes wrong then you can just restore the backup and your website will be restored to the way it was before making any changes.

My hosting does not allow me to add custom CSS?

If your web hosting does not allow you to add custom CSS to your WordPress website then you are probably using wordpress.com hosting instead of wordpress.org self-hosted.

If that’s the case then you will need to upgrade your hosting plan to a business plan in order to be able to add custom CSS.

Leave a Comment

Your email address will not be published. Required fields are marked *