• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » How To Customize Your WordPress Themes » Foodie Pro Classic Tutorials

    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.

    Primary Sidebar

    How To Customize Your WordPress Themes

    • How to Create Multiple Recipe Index Pages
    • How to Set a Favicon
    • Plugins to Install
    • How to Change the Header Size
    • How to Change the Background Color of the Genesis eNews Widgets
    • Font Size for Food Blogs
    • Why is troubleshooting so complex?
    • How to Launch Your Food Blog
    • Add a Before Entry Widget Area
    • Recipe Index: Content Configuration (Cravings Pro + Seasoned Pro)
    • How Do I Set Up My Navigation Menu?
    • Can I Use Multiple Recipe Index Pages?
    • How Do I Update the Theme Version? (without the Feast Plugin)
    • Remove Search Box from Navigation Menu
    • How to Add the Visual Category Page Index
    • Customization Library
    • Setup a secondary navigation menu
    • How to clear your cache
    • Troubleshoot Plugin Conflicts
    • How to Add the Featured Posts Category Index
    • Food Blog Home Page Pagination
    • Cravings Pro Theme: Setup Your Navigation Menu
    • Why we're not supporting Gutenberg Oversized Images
    • Install Theme, and Import Demo Content and Widgets
    • How to change change your footer
    • Seasoned Pro Classic Tutorials
    • Manually Disable Google Fonts
    • Image Alt Tags
    • Why we don't support the read more tag
    • Pinterest for Food Bloggers
    • How to Create Multiple Recipe Index Pages
    • WordPress Settings
    • Foodie Pro Classic Tutorials
      • Foodie Pro 3.0 FAQ
      • How to Configure the Foodie Pro Classic Home Page
      • How Can I Update to Version 3.0?
      • How to Configure the Foodie Pro Recipe Index
      • How to Add a Logo to Foodie Pro 3.0
      • Configure the Foodie Pro Footer Widgets
      • Adding Social Icons to Foodie Pro Navigation Menu
      • How to Change the Header Size in Foodie Pro 3.0
      • Custom Fonts with Foodie Pro
    • Brunch Pro Classic Tutorials
    • Cook'd Pro Classic Tutorials
    • Cravings Pro Classic Tutorials
    • All About Featured Images
    • FAQ for All Themes
    • Add Google Analytics Tracking Code
    • Customization Referrals
    • Genesis Child Themes
    • Enable SSL for HTTPS on your Food Blog
    • How to Start a Food Blog
    • Set Up Your WooCommerce Shop
    • The parent theme could not be found. You will need to install the parent theme, genesis, before you can use this child theme
    • Food Blog Theme Features Comparison
    • Translation + Multi Language Support
    • Use Inspect Element to troubleshoot styles

    Free 5-Day Branding Design Challenge

    With this actionable 5-part challenge, you'll have just the digital design strategies you need for a profitable website... and best of all, it's free. Signup and get your first challenge delivered immediately!

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.