Genesis - How to change theme logo size

If you'd like to make the logo/header area in your theme larger (or smaller!), this is the tutorial for you. 🙂

Before making any edits to your Functions.php file, please make sure that you have access to the File Manager in your cPanel or FTP. The Functions.php file is incredibly sensitive and if a mistake is made, it can cause the "white screen of death" on your site. Having easy access to your File Manager means you can easily upload a fresh copy of the Functions.php file if the need arises.

1. First, determine what size you would like your logo to display at. In this example, we will assume you want your logo to display at  1000x500px. Since 17th Avenue themes support a retina logo, you will need to save your logo image at TWICE the size you want it to display at. So in our example, that would mean:

Desired display size on your website = 1000x500px

Save your logo image as = 2000x1000px

Note: The ENTIRE logo should be doubled in size. Do not just add white space while keeping your logo small. Your logo should appear very large at the doubled size — remember, it will display at half that size when you're finished!

2. In your WordPress dashboard, go to Appearance > Editor > Functions.php.

3. Locate the "Add Support for Custom Header" section in the Functions.php file. If you can't find it, click inside the code box and press Command/Ctrl + F to search.

4. Change the width and height values to match your  LOGO FILE dimensions (this is the doubled size referenced above). In the example we are working with, you would use 2000 for the width and 1000 for the height. Click Update File.

5. Copy the code below:

.header-image .site-header,
.header-image .site-title a {
	background-size: 400px 150px !important;
	height: 150px;
}

@media only screen and (max-width: 680px) {
	.header-image .site-title a {
		background-size: contain !important;
	} }

6. Go to Appearance > Customize > Additional CSS and paste the code.

7. Change 400px to your DISPLAY WIDTH. Change both instances of 150px to your DISPLAY HEIGHT.

In our example, the updated code would look like this:

.header-image .site-header,
.header-image .site-title a { 	
        background-size: 1000px 500px !important; 	
        height: 500px; }

@media only screen and (max-width: 680px) { 	
        .header-image .site-title a { 		
                background-size: contain !important; 
        } }
	

8. Upload your new logo image at Appearance > Header. Click Publish to save your changes.

If there is too much white space around your logo after changing the dimensions, click here for instructions on adjusting the margins.