In all of our themes version 3.1.6 and up, header sizes are displayed at whatever resolution they're uploaded at. This tutorial is outdated for versions newer than 3.1.6. See this post: rethinking the header image.
You can change the size of your header in Brunch Pro by editing this snippet in the functions.php file:
add_theme_support( 'custom-header', array( 'width' => 640, 'height' => 300, 'header-selector' => '.site-title a', 'header-text' => false, ) );
Just replace the width and height with the actual dimensions of your header image. You'll need to create your image at twice the size you want it to display so the header looks great on retina screens.
You'll also need to adjust the style.css file in this snippet:
.header-image .site-title > a {
-webkit-background-size: contain !important;
background-size: contain !important;
display: block;
height: 150px;
margin: 10px auto;
max-width: 320px;
text-indent: -9999px;
}
by replacing the height property with half the height of your image and the max-width property with half the width of your image.
Please keep in mind that any changes you make will also affect how the header is displayed on mobile devices. If your header is very wide, it may not look good for mobile without additional coding customizations being made. An example of a media query that you may need to add is:
@media only screen and (max-width: 420px) {
/* Resize logo header for smaller devices */
.header-image .site-title > a {
height: 150px;
max-width: 320px;
}
}
Note: These instructions only apply to changing the header size when you are using the centered logo. To change the header size with the left aligned logo would require some development work that falls outside the scope of our support. If you'd like to get hired help with that customization please reach out to us for some development referrals.