How to Change the Header Size in Foodie Pro 3.0

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. For more details, see: https://feastdesignco.com/rethinking-the-header/

This tutorial is now outdated - it's around only for posterity and for bloggers using themes older than 3.1.6 (not recommended). 640x340 is not the recommended size, we do not recommend "retina quality logos", and you should not ever edit the functions.php file.

Historical:

You'll need to create your logo image at twice the size you want it to display so the header looks great on retina screens. Once you have the logo created you can change the size of your header by editing this snippet in the functions.php file:

add_theme_support( 'custom-header', array(
		'width'           => 640,
		'height'          => 340,
		'header-selector' => '.site-title a',
		'header-text'     => false,
	) );

Just replace the width and height with the actual dimensions of your header image.

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.

Mobile Responsiveness

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 to your style.css is:

@media only screen and (max-width: 420px) {
	/* Resize logo header for smaller devices */
	.header-image .site-title > a {
	height: 150px;
	max-width: 320px;
    	}
}

Also see: How Do I Edit My Theme Files?

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.