Sridhar Katakam

Genesis and WordPress Tutorials

How to add a responsive wide header in Genesis

by 39 Comments

This tutorial has been updated on October 19, 2015.

Want to use a image as wide as the container as header in Genesis child themes?

wide-header.genesis

or how about a fully wide header image going edge to edge?

fully-wide-header-genesis

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Add the following in child theme'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’m about to try this with the Magazine theme, would these dimensions work? Is it responsive? I’ve read that some people have issues with that when uploading their own headers.

    Thanks

    Reply

  • Ok scrap the above comment. I’ve managed to get the header on as shown above but now I wish to remove the padding from top and bottom. I’ve literally tried everything explained else where and I still have padding! ahhh. Help

    Reply

  • Sridhar,

    I’ve tried this with the Modern Blogger Pro theme and it keeps breaking and giving me the white screen when I paste into the functions.php.

    I copied your code raw, changed the image link, and I’m working on local server.

    Does this code work on Modern Blogger theme?

    Thanks for your assistance.

    Reply

  • No, Sridhar I did not. But what I did in error is left out the last bracket.

    Thanks for your help and your great tutorials as always.

    BTW Congrats on your first theme! It is clean and beautiful….I can’t wait to take it for a ride. 🙂

    Best Regards

    Reply

  • Sridhar,

    That totally worked! thanks! Another question. Am I able to get it beyond the length of what the header is now because it seems to be fixed with the page column. I don’t want it to stretch to the edges but I am thinking of re designing so it’s not so rectangular so will need it to break free of it’s confines. Ta.

    http://www.thelostlondoner.com

    Reply

    • Hey Sridar,

      Trying to use this method again.

      You seem like a guru on all of this. Basically Dreamhost are now using Pydio which for some reason won’t let me edit or even see my functions.php anymore (they were once using ajax). I also can’t edit in FileZilla as the subscription for my HTML editor has expired.

      Do you know a decent free HTML editor to download for iOS? This may also explain why Pydio won’t open my files, which is rubbish.

      Or if there is a way to just change it via WP child theme settings.

      Reply

  • Hi Sridhar,

    I’ve been successful in getting a full width responsive header placed in Runway using your code and removed the padding in desktop view. I would like to know how do you remove the extra padding for mobile view?

    Reply

  • Hi Sridhar,

    Thanks for the tutorial. I have been looking far and wide but I cant’ seem to get this to work with the Streamline Pro theme from Studio Press. Maybe my skills aren’t good enough and I’m not inserting the code into the correct location but I continue to get the error when I enter the code into the functions.php file of my child theme. Does the code need to go at the very top of the original code or does it have to be placed in a particular area? Thanks in advance.

    Sean

    Reply

  • You are awesome – you’ve saved me hours and hours of time. This absolutely worked perfectly on my client site. Thanks and I hope the move to Australia went well for you!

    Reply

  • Followed your instructions and I tested on a demo-test site first and it worked perfectly!

    I used Genesis News Pro theme

    Many thanks for this excellent, clear and precise tutorial 🙂

    Reply

  • Hi,

    Thank you for the great guide! I used it on my website and got the header to link back to my home page.

    I am having a problem with the whitespace/padding around my header image.

    I have tried adding:

    .site-header {
    padding: 0;
    }

    .site-header img {
    vertical-align: top;
    }

    As suggested here and in related posts, but I cannot seem to get it to remove the padding.

    I also tried modifying a section i found in my CSS folder from 40 to 0.

    .site-header {
    background: #fff url(images/lines-vertical.png);
    background-size: 3px 1px;
    box-shadow: 0 0 10px #222;
    margin: 0 auto;
    max-width: 1140px;
    padding: 40px;
    }

    However, I have been unable to remove the whitespace.

    Would you mind taking a look at http://www.investingisland.com and offering suggestions?

    Thanks!

    Reply

  • Hi Sridhar!
    THANK YOU!!! So very very much! I´ve been sitting here literally all day trying to figure this out, and after applying at least 15 different techniques (thats how it feels at least), your method its the one that gets me where I wanted to be – finally! I don´t have any experience with CSS and php, but your instructions were very nice and clear, even I could do it.

    So thanks again! Mirjam

    Reply

  • Having trouble addind widget in header-right with this.

    I tried adding do_action( 'genesis_header_right' ); to sk_do_header but nothing happened.

    Reply

  • Sridhar,
    Thanks so much for this tutorial. I’ve implemented it here: http://jenfulwiler.staging.wpengine.com/

    I’m using Dynamik and my post/page content areas have a 20px padding on left & right. The result is my header is a little wider than the content below.

    I’ve tried everything in CSS that I can think of. Any suggestions?

    Thanks!
    Craig

    Reply

  • Hi Sridhar,

    just added this to my site but the header is in no way responsive, when I change the screen size it just cuts off portions of the header image. Could you please advise?

    Reply
    • >