Sridhar Katakam

Genesis and WordPress Tutorials

How to add a responsive Header image in Metro Pro

by 33 Comments

Updated on December 23, 2015

The earlier method is here just for reference. The new method below is recommended.

Screenshots

Desktop view

metro-pro-responsive-header-desktop

Tablet view

metro-pro-responsive-header-tablet

Mobile view

metro-pro-responsive-header-mobile

Step 1

Add the following in Metro Pro's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar
    I read your article. Though not using Genesis, I wondered what should be the max height of header (or logo). Some themes can digest a header of 360 x 180 and be responsive whereas some go awry with smaller images.
    In searc, I came here. What’s your take on it?
    Thanks

    Reply

  • Hi Sridhar. I’ve tried both of these… currently trying option 2 again… I keep getting a blank/white space where the image should be. Though when I hover over it, it shows that it’s clickable and when I inspect element in Firebug it shows that the image is there… not sure what I’m missing.

    Reply

  • Super helpful article – much appreciated! I’ve noticed that I have some white space above my header and that this coding is not responsive to mobile sites/tablets/changing the size of the screen on my laptop. Any suggestions?

    Also, do you know how I can change my navigation menu colors and my buttons/links from black and bright green to custom colors?

    Reply

  • Hi

    Great tutorial, thank you very much! I know nothing about css so following great guides like yours is the key!

    I followed method #2 because even following all steps for method #1, and setting the size for 1068×394, the small logo size still was appearing.

    However, using method 2 requires to upload an image – disabling the option “Random: Show a different image on each page”.

    Is there a way to enable it using method 2?

    Best regards

    Reply

  • Hi Sridhar,

    It is a great article for Metro Pro WordPress Theme by StudioPress. However, I am developing an Outreach Pro WordPress Theme by StudioPress and I am a beginner. I am having a problem that the header is not responsive to some devices. I have customised a header image to 1140×200 pixels. Such devices are such as 10″ and 12″ notebooks and all other tablets that are being the problem for this header. However, the header works fine with mobile phone sizes and other larger screens than 12″. The logo is an png so it is an image file.

    I copied a related section from function.php as you mentioned above.

    //* Add support for custom header
    add_theme_support( ‘custom-header’, array(
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ‘height’ => 200,
    ‘width’ => 1140,
    ) );

    From CSS stylesheet
    .header-image .title-area {
    padding: 0;
    }

    .header-image .site-title > a {
    float: left;
    min-height: 200px;
    width: 100%;
    }

    I would appreciate if you could give me suggestions on how to fix this problem. I have tried many solutions but it didn’t work. I also not understand php, javascripts.

    Regards
    Suwanna

    Reply

  • Thank you Sridhar!

    If I would like to display the Primary Nav Menu in my Metro Pro theme after a feature-box I created at the top. How would you do that using this code?
    If you look at my site you will see a feature-box and after the last entries. I would like to insert the Primary Nav Menu before the last post entries.

    I hope you understand what I meant by looking here http://www.judiosyjudaismo.com

    Thank you very much!
    Diego

    Reply
    • >