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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Customize Header Logo & Banner Images In Metro Theme

In this tutorial, we’ll look at how to add different images in the header of the Metro child theme by StudioPress.

By default, here’s what the header looks like with a title entered in the General Settings.

default header title text - Metro theme

Looks o.k however there’s a margin for white space above and below which you may want to remove.

You may also want to add a full length header image or a logo and image in the header right widget which we’ll also cover in this post.

Here’s what we’ll do in this post:

result after adding logo and image banner

Here’s the new demo logo, header right widget image and full length header image we’ll be adding in this tutorial.

Logo 300 width x 120 height

header logo example

Header Right Widget Image 750 width x 120 height

header right widget image demo

Full Width Header Image 1080 width x 120 height

full width header image sample

Note: Its best to copy and paste the code which needs modifying to the end of your file before making changes as this way you can easily manage your customization.

Getting the Logo Right First

All 3 images above are exactly the same height.

The default settings for this themes custom header can be found on line 64 of the themes functions.php file.

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 270,
	'height'          => 80,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

If you go to Appearance > Header and simply uploaded an image without matching the size to these settings, this is what it may look like.

logo cropped

Because of the settings in the code above, our logo demo which is 300 x 120 will be cropped and not displayed properly on the front end.

cropped logo

To fix this, we firstly change the values in the PHP code above to match the exact same size of the logo.

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 300,
	'height'          => 120,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

And then re-upload our logo image in the backend of WordPress:

new logo size

Here’s what it now looks like in the front end:

logo frontend

It looks better and the whole logo has been added without being forced to be cropped first, however its still not perfect.

To make it display fully, we’ll need to modify the values in the child themes style.css file.

On Line 867 we change the height from 87 to 120px

.site-header {
	min-height: 120px;
	overflow: hidden;
}

That now makes the full logo image display however the margin & padding below the logo isn’t being displayed. You can keep it like that or change more CSS in your style sheet.

logo flush nav-menu

On Line 926, add some values to the margin and/or padding to add whitespace between your logo and the nav menu:

.header-image .site-title {
	margin: 20;
	padding: 0;
}

And here’s what it looks like now:

logo with margin

Next step is to fill up that white space on the right side of the header with an image.

Perfect Alignment For Header Right Widget Image

You can upload and insert a new image in a post draft and then copy and paste the HTML for the image into a text widget which you then drag into the header right widget area.

This is what it will look like:

header image to small

Ahmmmm its shunk.

To fix this, simply go back into your style.css file and change some values for the header widget on Line 942.

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar,
.subnav-left,
.site-header .widget-area {
	width: 31.111111111%; /* 336px / 1080px */
}

If you change the above value from 31.1% to something else, it will also effect the other classes you can see which use this same value in the declaration.

The reason the code has been consolidated like this is for efficiency however, we will need to separate the header widget code or your site will be messed up. So please leave that code untouched.

The best way to do this is to take the CSS for the site-header . widget-area and paste it at the end of the file, then change the value from a percentage to a pixel value like this:

.site-header .widget-area {
	width: 750px; /* 750px / 1080px */
}

Still with me?

Here’s what your header images look like now:

header images messed up

The width and height is right but the alignment needs one final adjustment.

Go to Line 881 and copy this code below which needs to be pasted at the end of your file and modified:

.title-area {
	width: 300px; /* 300px / 1080px */
}

Looking good now:

perfect header image alignment

You’ve done well and must have a smile on your face now?

But wait! There’s more that can be done.

Lets remove some of that white space above the header images as you already know how to remove whats below them.

On line 401, copy the CSS code for the site-container and paste it at the end of your file removing the 2.25rem value for the padding.

.site-container {
    clear: both;
    padding: 0;
}

Here’s the result which is pretty much perfect except for the color matching which you may find help for using these color tools.

perfect header image align

Full Width Header

Simply change the values in your functions file to match the full width header with and height. Then you simply upload your header banner which is exactly the same size.

add_theme_support( 'custom-header', array(
	'flex-height'	=> true,
	'height'		=> 120,
	'width'			=> 1080
) );

Here’s how easy it is:

full header banner

This way you can still use the header right widget for a search box, social follow buttons and some text.

You may need to modify the CSS code for the search box width in your style sheet.

Here’s more about how to change different logo & header image sizes in themes using the Genesis framework.

Metro Pro Theme

Reader Interactions

Comments

  1. millepa says

    June 13, 2016 at 7:27 am

    Hi Brad,

    I am using Metro Pro theme. The css and function line references you give in your instructions don’t match with the theme files. I tried to put the one long 1080×120 logo in place but wasn’t sure which steps from the first part of your tutorial (with 2 logos) I should use. I tried using all the steps and it didn’t display and have since played around with it but still can’t get it to display properly. Any advice?

    http://4d9.f48.myftpupload.com/

    Log in to Reply
    • Brad Dalton says

      June 13, 2016 at 2:59 pm

      There’s 2 steps which apply to the functions.php and style.css files.

      1. Match the values in the PHP code for custom_header to the size of your image.
      2. Match the values in the CSS for the width and height to the size of your image. These values will be included in the CSS rules under the Site Header section of your style.css file so check ALL the CSS rules under the entire site header section and change any values for the width and height to match your image size.

      If you are using a code editor which adds spaces to the code in a style.css or functions.php file like some do, the line numbers will NOT match what i have referenced in this tutorial.

      Log in to Reply
      • millepa says

        June 14, 2016 at 11:40 am

        The function.php file has the correct file size:
        //* Add support for custom header
        add_theme_support( ‘custom-header’, array(
        ‘width’ => 1080,
        ‘height’ => 120,
        ‘header-selector’ => ‘.site-title a’,
        ‘header-text’ => false
        ) );

        The css file has the following code. I added the last two declarations.

        .site-container {
        background-color: #fff;
        margin: 32px auto;
        max-width: 1140px;
        overflow: hidden;
        padding: 36px;
        clear:both;
        padding:0;
        }

        Any advice?

        Log in to Reply
        • millepa says

          June 14, 2016 at 11:42 am

          I am not sure which site-container in the css file I need to modify. Below are all instances:

          ~/Desktop/style.css:109: .site-container:before,
          ~/Desktop/style.css:127: .site-container:after,
          ~/Desktop/style.css:439: .site-container button:disabled,
          ~/Desktop/style.css:440: .site-container button:disabled:hover,
          ~/Desktop/style.css:441: .site-container input:disabled,
          ~/Desktop/style.css:442: .site-container input:disabled:hover,
          ~/Desktop/style.css:443: .site-container input[type=”button”]:disabled,
          ~/Desktop/style.css:444: .site-container input[type=”button”]:disabled:hover,
          ~/Desktop/style.css:445: .site-container input[type=”reset”]:disabled,
          ~/Desktop/style.css:446: .site-container input[type=”reset”]:disabled:hover,
          ~/Desktop/style.css:447: .site-container input[type=”submit”]:disabled,
          ~/Desktop/style.css:448: .site-container input[type=”submit”]:disabled:hover {
          ~/Desktop/style.css:503: .site-container {
          ~/Desktop/style.css:566: .metro-pro-landing .site-container {
          ~/Desktop/style.css:1951: .site-container,
          ~/Desktop/style.css:1991: .site-container,
          ~/Desktop/style.css:2086: .site-container {
          ~/Desktop/style.css:2090: .site-container {

          Log in to Reply
          • millepa says

            June 14, 2016 at 11:43 am

            oh no, I noticed now that my site is off centered now after modifying the functions file.

            http://screencast.com/t/9NIsKhuhAz7

        • Brad Dalton says

          June 14, 2016 at 9:07 pm

          Has nothing to do with the .site-container so don’t change any rules using that class.

          Log in to Reply
          • millepa says

            June 15, 2016 at 6:17 am

            But your instructions above say:

            On line 401, copy the CSS code for the site-container and paste it at the end of your file removing the 2.25rem value for the padding.

            .site-container {
            clear: both;
            padding: 0;
            }

          • Brad Dalton says

            June 15, 2016 at 6:25 am

            Please send me FTP hostname, username and password and i’ll fix it for you.

          • millepa says

            June 16, 2016 at 7:49 am

            Brad, I email you my ftp. It doesn’t look like you were able to look at this yet eh?

  2. Ana says

    September 4, 2014 at 1:57 pm

    Sorry, it’s working now, please disregard my comment. Have a nice day

    Log in to Reply
    • Brad Dalton says

      September 4, 2014 at 3:08 pm

      Browser caching?

      Log in to Reply
      • Ana says

        September 4, 2014 at 6:40 pm

        I hope so, but it took long time, around 5 min. Suddenly, I had an error “error to access the database”, I’ve went to cPanel, restored. Now, I have a little bit different font inside my WP dashboard, very annoying! All my 3 websites on different servers, different themes and plugins, but the same annoying font change, it’s a little bit blurry.

        Log in to Reply
  3. Ana says

    September 4, 2014 at 1:54 pm

    Brad, thank you for the nice tutorial. The code for the Metro Pro has been changed a little bit and I am trying to insert 1080×87 logo.

    I’ve changed functions.php file to:

    No luck. I still have 360px wide image.

    Log in to Reply
  4. Ana says

    August 23, 2014 at 3:02 pm

    Hi Brad, this question may be a little out of topic. You have this red content box with a dark red stripe on the left side in this article with “Note: Its best to copy and paste the code …”
    What plugin or code do you use? I am using a Genesis Style Shortcodes plugin, but it doesn’t have this vertical stripe.

    Thank you.

    Log in to Reply
    • Brad Dalton says

      August 23, 2014 at 3:35 pm

      You mean you want to create the content box?

      Log in to Reply
      • Ana says

        August 23, 2014 at 5:34 pm

        I want to create a content box with this vertical stripe on the left.

        Log in to Reply
        • Brad Dalton says

          August 23, 2014 at 5:38 pm

          Try this http://wpsites.net/wordpress-themes/colored-buttons-content-boxes/

          Log in to Reply
          • Ana says

            August 23, 2014 at 5:40 pm

            Thank you!!!

  5. Gabriel says

    July 22, 2014 at 5:53 am

    Hi Brad,

    This is an old issue, but only now have I encountered it. I hope you are available to share some of your knowledge.

    With the Genesis Metro theme, all I am trying to is have a full-width banner. I have read your informative tutorial attempted to follow the instructions. I thought I had done a good job, but issue persists.

    After my failed attempt, I also decided to edit the css:

    I also edited the CSS:

    .header-image .site-title a {
    background-color: none;
    max-width: 1080px;
    min-height: 120px;
    padding: 0;
    }

    But that produced no favorable results.

    Please let me know what I am doing wrong.

    Thank you so much for your time and consideration.

    Best,
    Gabriel

    Log in to Reply
    • Brad Dalton says

      July 22, 2014 at 5:59 am

      Gabriel

      You need to find all the values for width under the entire Site Header section and change them. Clearly you have missed one.

      Log in to Reply
  6. Ben Sharp says

    July 1, 2014 at 1:06 pm

    Hello I followed your tutorial to get the full width header image though when I upload my image that is the dimensions that I changed in the functions.php file. Though when I upload the image the original metro theme title is still there (www.thegullibleskeptic.com is my site), and the new image I uploaded is kind of behind the original title.

    Log in to Reply
    • Brad Dalton says

      July 1, 2014 at 1:10 pm

      You can remove the title using PHP, CSS, Header settings or the General settings.

      Log in to Reply
  7. s pasha says

    March 28, 2014 at 12:41 pm

    Thank you for the tutorial. However, I am trying to insert a search box next to my header, but for some reason it starts blocking out a part of my logo when I insert the widget. Would you know what settings to change?

    Thank you!

    Log in to Reply
  8. Jan says

    February 20, 2014 at 8:58 am

    Awesome! 🙂 Thanks for the tutorial. Increase the height of the full width banner so I can still use the widget area 🙂

    Log in to Reply
  9. David says

    October 28, 2013 at 11:45 pm

    Hi Brad. I’ve implemented this and it appeared to be working fine on glenwaverleypodiatry.com.au. However it seems to be showing the default site title and area instead of the new full width logo placeholder.

    Any help would be much appreciated.

    Log in to Reply
  10. Fehl Dungo says

    October 21, 2013 at 9:42 am

    Hi! I love Metro theme but the header has been a big headache for me. I’m using Metro Pro now and I had no success in letting 300×120 logo and 750×120 banner on the header. I’m glad I found this page though coz it’s exactly what I want on my header. I’ve been trying to tweak my header since yesterday. Can you help me?

    Log in to Reply
    • Brad Dalton says

      October 21, 2013 at 9:44 am

      Sure.

      You will need to change the values for both the header image and header right widget height and width in your child themes style.css file.

      All the code that needs modifying is in the header section of the file.

      Log in to Reply
      • Fehl Dungo says

        October 22, 2013 at 5:05 am

        Thank you Brad. I’m close in getting it 🙂 It is hard coz the codes in Metro Pro are not exactly in the lines you mentioned but following your instructions above helps a lot. I was able to make my header like that with the 750×120 banner. Looks perfect on the desktop but when I view it on the ipad, the logo is cropped a little and the banner’s height is not the same. Help pleaze 🙂

        Log in to Reply
        • Brad Dalton says

          October 22, 2013 at 9:03 am

          The CSS needs modifying in the Media Queries

          Log in to Reply
  11. Niki Taylor says

    October 18, 2013 at 1:00 am

    I have been trying to do this for 4 hours now. I changed both the CSS file and the functions file to accommodate a larger header. It now says when I go to upload the new header that it must be 1020 x 230 but no mater what size my header is from 224 x 224 or 1040 x 87 it wants to crop the end every single time. I am beyond frustrated. If anyone can help me with this I am happy to pay! I am at my wit’s end! HELP!!!

    Log in to Reply
    • Brad Dalton says

      October 18, 2013 at 7:27 am

      Hi Niki

      Please send me your login details and i will fix it for you.

      Log in to Reply
    • Niki Taylor says

      October 18, 2013 at 4:32 pm

      Hey Brad, thanks for your offer to help. You rock! I figured it out!!

      Log in to Reply
      • Brad Dalton says

        October 18, 2013 at 4:48 pm

        You rock too Niki.

        Just watched one of your videos and you look great on camera!

        Log in to Reply
  12. Robb says

    October 10, 2013 at 10:55 pm

    I was able to tweak my Metro theme just like you said, and got my logo looking a whole lot sweeter. Thanks Brad for the tips.

    Log in to Reply
    • Brad Dalton says

      October 11, 2013 at 12:56 am

      No worries Rob.

      Log in to Reply
  13. Petko Dimoff says

    September 10, 2013 at 6:16 pm

    Thank you for the article, it’s a great resource. I’m also a Metro theme and I would like to ask how to move the logo more to the left, it extends less than white sheet because I use ribbon logo and want it to stay on the left, not the middle?

    Log in to Reply
    • Brad Dalton says

      September 11, 2013 at 5:45 am

      Hi Petko

      If you need any custom coding, please use the contact form on my site. Thanks

      Log in to Reply
  14. Sandi says

    August 29, 2013 at 5:32 pm

    This worked and I see part of my logo, but the big red bar rectangle is showing up on top of my logo. How do we remove this in the Metro Theme?

    Thank you

    Log in to Reply
    • Brad Dalton says

      August 31, 2013 at 1:21 am

      You will need to follow the tutorial which deals with different values on the CSS and PHP code. Its tested for different sized logos and headers so you’ll find its simply a matter of matching the values to your logo.

      Log in to Reply
  15. Angela says

    August 27, 2013 at 6:17 pm

    Thanks much! We will definitely keep the standard 1080 width then. The tutorial went VERY smoothly this morning.

    Thanks again for this tutorial! It was very easy to follow and I appreciate that!

    Log in to Reply
    • Brad Dalton says

      August 28, 2013 at 12:14 am

      Thanks Angela

      More of the same to come.

      Log in to Reply
  16. Angela says

    August 26, 2013 at 7:54 pm

    THANK YOU for this tutorial! These are the exact issues I’ve struggled with on Metro. I can’t wait to check this out!

    One question: I will likely need to change the width on the entire site, simply because we want a leaderboard ad in the Home Bottom section. Right now, the ad is resizing to about 650. Do you have a tutorial on that as well?

    Log in to Reply
    • Brad Dalton says

      August 26, 2013 at 11:54 pm

      Hi Angela

      I have many on adding content in different positions but i wouldn’t change the content width for a ad.

      You would then need to change the sidebar width and other elements as well.

      Log in to Reply
  17. Kingsley says

    August 17, 2013 at 11:28 am

    Hello Thank you for this tutorial, html 5 markup is not working on my blog it breaks the theme. is there a way you can make the tutorial for XHTML users??

    Log in to Reply
    • Brad Dalton says

      August 17, 2013 at 11:42 am

      HTML 5 works on every StudioPress child theme.

      I have converted the Metro child theme to HTML 5 and it works perfectly.

      This tutorial is based on the HTML 5 version of the Metro child theme and all the testing and screenshots have been taken from the HTML 5 version.

      Its the best markup which i suggest everyone uses.

      Log in to Reply
      • Kingsley says

        August 17, 2013 at 11:51 am

        I have tried up to 3 tips they all broke once i add the HTML5 markup to function.php

        Log in to Reply
        • Brad Dalton says

          August 17, 2013 at 12:13 pm

          You also need to convert the CSS selectors to the new ones.

          Log in to Reply
          • Kingsley says

            August 17, 2013 at 9:19 pm

            I did all that but it keeps breaking, I tried it with Metro, prose and eleven40 themes

          • Brad Dalton says

            August 17, 2013 at 9:59 pm

            You may have to wait until all the themes have been updated if you can’t figure it out yourself.

            Your site is working fine on Prose at the moment which is good.

  18. Kingsley says

    August 17, 2013 at 10:51 am

    Thank you, That is why the changes never took place…. let me try it again

    Log in to Reply
  19. Kingsley says

    August 17, 2013 at 10:14 am

    Hello I think you made a mistake, the Header Code is
    /* 03c – Header ———– */

    #header {
    min-height: 120px;
    overflow: hidden;
    }

    and not

    .site-header {
    min-height: 120px;
    overflow: hidden;
    }

    Log in to Reply
    • Brad Dalton says

      August 17, 2013 at 10:36 am

      Hi Kingsley

      Either one works depending on which version of Genesis you are running.

      Many people are still running the old XHTML markup and some have converted to HTML 5.

      #header works with XHTML markup

      .site-header works with HTML 5 markup

      I see you are still running the old markup so in your case, you would need to use #header.

      Log in to Reply
  20. Joan says

    August 12, 2013 at 7:46 pm

    Always appreciate your feedback. How did you find this tutorial?

    Very helpful! As always, the step by step helps to learn more much than just the final code. Seeing the not finished screenshots helps to identify problems not just for this case, but whenever we get similar CSS issues.

    Log in to Reply
    • Brad Dalton says

      August 12, 2013 at 7:51 pm

      Thanks for the comment Joan.

      Seemed a bit different customizing the header images on this theme compared to the Eleven40 Pro version.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.