Menu ▼

Black Hills Web Works

WordPress...and other stuffBack to the blog

How to replace the StudioPress background header image with a real image logo

Posted on //

Update (August 8, 2013): This does work with both Genesis 1.9 and 2.0, the pre-HTML5 themes, and the new HTML5 themes.

I think I need to start by saying that this post is in no way a complaint about StudioPress themes or the Genesis framework. I switched to Genesis and StudioPress late in 2012 and I couldn’t be happier. In fact, I’ve been systematically going through my existing websites and converting them to StudioPress from, well, what they were before. 🙂

Having said that, a theme provider like StudioPress sells themes to the masses, and they need to make them as usable as they can for a large number of people. I suspect that reasoning influenced how they decided to handle incorporating a custom logo image into their themes, namely through using a full-width background image uploaded through the Appearance > Header option.

What’s the problem with using a background image for a logo?

Good question. The first website I built with StudioPress was a redesign of my wife’s website, A Heart for Justice. She first noticed an issue when she was sharing a link on Facebook to one of her blog posts, and her website logo wasn’t one of the thumbnail options that Facebook offered. I thought that was odd, and what I determined was that background images are not available for thumbnails on Facebook, or anywhere else (probably).

There are other issues associated with using a background image for the logo, and for some examples you can browse through the StudioPress forums to see what people are dealing with on their websites. Here’s one example: Outreach template: issues with the header image

Does this really work?

Since working out this solution on my wife’s website I’ve used it on every StudioPress site I’ve built since then, including this one, except for one site that uses text instead of an image for the logo. I can tell you it works beautifully, it’s fully responsive, and it’s part of the core functionality that I add to every website I build.

For some working examples I’ll include a list of websites, by theme, using this technique at the end of this post.

Replace the background image with a real image logo

You can follow these steps in this order, or not, but the important thing is to include all of them.

1. Genesis > Theme Settings

Genesis > Theme Settings > Header - image logoI’m guessing you’ve already done this, but if not, go to Genesis > Theme Settings > Header and change the setting to Image Logo. If you don’t see this option, you probably need to do the next step first.

2. Comment out the “Add support for custom header” code in functions.php

Depending on your child theme you may or may not have this in your functions.php file, but more than likely you do. This example is from the Apparition child theme, but yours will be similar:

Gist – “Add support for custom header” code in functions.php

You can either comment out the code like I did in this example, or delete it all together. It’s not going to hurt anything to leave it in there, and if you ever change your mind about this you could always uncomment the code to revert back to the way it was.

3. Upload the logo image file

Using FTP (Filezilla is a great choice), upload your logo image to the images directory in your child theme. So for my example, I would upload the file logo.png to wp-content/themes/apparition/images.

I suppose you could do this using the Media Library, but then you’d need to further modify the code in the next step, and you run the risk of you or someone else deleting that image from the Library, leaving your site without a logo.

4. Filter the genesis_seo_site_title function

This is where the real “magic” happens. Genesis kindly included apply_filters in the genesis_seo_site_title function, and by adding the code below to your functions.php file you’ll filter that function to include your logo image there. One benefit of doing it this way is that your logo will then be linked to your site’s home page, as it should be with a website logo.

Add the code at the end of your functions.php

Gist – Filter the genesis_seo_site_title function

Note: If your image is named something other than logo.png you’ll need to edit that part of the code above.
Edit (July 4, 2013): I updated the filter code above to include the site title as text inside the H1 tags (on the home page), added a span tag and inline style to style the text as “display: none;”, and removed the alt attribute from the image logo. If the inline-style really bothers you, you could replace that with a class and add it to your style.css file. 🙂
Edit (July 5, 2013): After further discussion in the comments and pondering this issue, I’ve decided to undo yesterday’s change. Opinions seem to be evenly split on whether or not to include hidden text with an image inside H1 tags: for example, see this thread and this thread on Stackoverflow. Beyond those two threads, this video from Google Webmasters carried considerable weight in my decision. Finally, analyzing my home page with this tool from Seoptimer showed that the image alt attribute for the logo was being used as the text for the H1 tag on the home page.(Personally, I don’t think that hiding only the H1 tag text on the home page is going to be frowned on by Google, but why take that chance when the image alt text also seems to work?)

5. Edit the CSS

Finally, you’ll need to make a few CSS edits in your child theme’s style.css file to finish this process. These will vary somewhat depending on your theme, and how you handle your theme’s responsiveness, but here are the basics, using the Apparition theme as an example:

Gist – Image logo CSS edits

Probably the most important part to comment out is the text-indent: -9999px; declaration, followed by the min-height and height declarations. Beyond that, and depending on the theme, I would comment out everything that doesn’t need to be there, using Firebug to determine what that is.

If your theme is responsive, you will probably have a few more CSS tweaks to polish this off completely, unique to your theme, website, and logo image.

6. Remove the site description [Update]

I do this with all my sites by default, though some StudioPress themes, Metro for example, take care of this step for you. If your theme doesn’t have this code in functions.php then you’ll probably need to add it. If you don’t, you’ll see your site description next to your logo and wonder why it’s there.

Gist – Remove the site description

Examples of sites using this technique

As promised earlier, here are a few sites that I’ve built using this technique for the image logo. You may want to re-size your browser while checking them out, to see what happens to the logo.

Apparition theme

whatthebiblesaysaboutthat.com

Education theme

gracechurch.bhwebworks.com

eleven40 theme

bellapartners.org

Executive theme

woodland.bhwebworks.com

parkviewefc.org

Metro theme

cloudpeakenergy.com

citychurch.bhwebworks.com

Minimum theme

This website 🙂

Outreach theme

thegathering.bhwebworks.com

Feedback welcome

If you found this helpful, let me know! And if you see a way to improve on this method, I’d love to hear about it. If you have questions or you’re having trouble getting this to work, feel free to ask in the comments and I’ll help where I can.

Enjoy!

Comments

  1. I just wanted to say thanks John. This is the most thorough demonstration on how to create a custom logo for the Genesis Eleven40 theme. All of the other methods are hit and miss. I have to agree with your assessments about the Genesis themes. For all they do well, they should be able to make it much easier to generate a custom logo like every other theme out there.

    Thanks for taking the time to create this post and walk me through the steps.

  3. Awesome tutorial. I just switched to the metro theme and have been struggling with this issue for the last several hours. I’m glad that I found this tutorial online. +1

    Kenneth

  4. There is no “Genesis > Theme Settings > Header” in the Metro theme. Did anyone else have this problem?

    • Hi Mel,

      You won’t see that until you do step 2 in the instructions – commenting out the “Add support for custom header” code in functions.php.

      John

  5. Hi,

    Great write up. I’m having trouble figuring out how to make this work with the Prose theme. I tried adding the code snippets in the custom code editor, but I can’t get my logo to show up. I’m assuming the problem is that I’m not editing the actual functions.php file, but it says specifically not to.

    • Hi Frank,

      Thanks for the comment. I haven’t used the Prose theme yet, and I personally don’t use the code editor, but you will want to add the code snippets to your functions.php file, and then you’ll also need to edit your style.css file to complete the process. If you post a link to the site you’re working on I’ll see if I can help out at all.

      John

      • Thanks for the quick reply, John, and thanks for offering to take a look. I can’t post a link however, because I’m working on the theme in Xampp. I’m just going to go ahead and make the edits in the appropriate files and see what happens. Thanks again.

  6. John, thanks so much for this tutorial. I’m converting some websites to responsive themes and your instructions worked perfectly.

  7. Thank you for this tutorial! It really “saved my life”… 🙂

    I had to make a few adjustments here and there, but it was almost completely straight forward.

    I do have one problem though… How can I get my logo to responsively move to the center at the smaller screen-size breakpoints (via media queries)? I know how to do the media queries, I just don’t know how to make the logo move to the center. I have tried almost everything I can think of before asking here…

    Here’s the site: http://moorecreativeideas.com/

  8. Thanks for this tutorial! I posted a comment here but I’m not sure what happened to it. Can’t recall exactly what I said, but I definitely needed some help with positioning the logo at the center and top when you resize the browser to smaller widths. I would like it to shift to the center at the breakpoint that causes the nav menu to drop down and become centered. (The link to the website should be linked in my name.)

    Thanks again for this awesome tutorial…

    • I guess my first comment was flagged as spam because I included a link or two. That’s why it didn’t show up. This second comment is fine…

      • I’m know to do this often: post a request for help, not be able to wait, and then solve it myself. 😉

        So, here’s the solution I came up with to center the logo at the top at smaller screen sizes:

        @media only screen and (max-width: 1023px) {
        .header-image #title-area {
        float: none;
        margin: 0 auto;
        }
        }

        Any thoughts?

    • Hey Chris,

      Glad you got it sorted out. I’ve been known to solve my own questions too after I ask them on a forum somewhere. Great way to learn!

      You’re solution is close to what I use, though with a few more tweaks you could make your logo image itself responsive also. You could look at what I did for this site using Firebug, for example, or any of the other sites I linked to in the article, but basically you can get rid of the following block of selectors completely, along with their declarations:

      .header-image #title-area,
      .header-image #title,
      .header-image #title a { }

      One nice thing about this logo technique is that you don’t have to give the logo or the container it’s in a width in the CSS, since when you do that it keeps it from being responsive. If your logo was any bigger you’d really notice it, but since it’s not too wide to begin with it probably looks mostly right on mobile devices.

      Having said all that, I should probably write a follow-up post explaining what I do with the responsive CSS for the header/logo/menu area.

      John

  9. Hello,

    Thanks for posting these instructions. I was pulling my hair out until I found your site.

    My logo looks good and is also fitting nicely in my mobile browser. The only thing Im having trouble getting rid of is what appears to be a drop shadow for an image that isnt there. Please look closely in my header area.

    Can you please tell me where to change this? I thought it was an image but I can find an image that looks like that. It must be in the css somewhere.

    Thanks for your help.

    • Hi James,

      The eleven40 theme is a little trickier than others, but here’s what you need to do, or at least what I would do.

      Comment out the following in your style.css:

      #title, lines 192-205,
      #title:before, lines 207-216,
      #title:after, lines 218-227,
      .header-image #title-area, .header-image #title, .header-image #title a, lines 252 (float: left) and 257 (width: 265px;),
      .eleven40-blue #title, lines 1504-1507,
      .eleven40-blue #title:before, lines 1509-1511,
      .eleven40-blue #title:after, lines 1513-1515

      That should take care of the CSS shadow, and it also keeps the page from trying to load some default logo images that aren’t there any more.

      John

  10. Hey John,

    I am trying to implement this on the Metro theme and am a bit stuck. Would it be possible for you to post the specific changes you made to the CSS for the Cloud Peak Energy Site or some other Metro theme? I haven’t been able to make the theme’s color background disappear from behind the .PNG logo image and I would like for it to be blank or white.

    Thanks,

    …Tim

    • Hey Tim,

      Every theme and website combination is a little (or a lot) different. For your site, if you comment out or remove the following selector from the end of line 1609 in style.css that should solve your problem. (Don’t forget the comma!)

      , .metro-blue #title a

      John

      • Thanks John,

        That did the trick with respect to the background behind the image; however I no longer see a hover color on the primary navigation menu.

        Do you recall having to do anything to fix this for the Cloud Peak Energy?

        …Tim

        • Tim,

          Looks like you have a typo in line 1607 and following – you’re missing a comma in line 1618 and you have a blank line at 1619. Some of the selectors in that group control your nav menu, so if you replace what you have at 1607 with the following code I think you’ll be up and running again.


          .metro-blue a.social-buttons:hover,
          .metro-blue button:hover,
          .metro-blue input:hover[type="button"],
          .metro-blue input:hover[type="submit"],
          .metro-blue .btn:hover,
          .metro-blue .genesis-nav-menu .current-menu-item a,
          .metro-blue .genesis-nav-menu li a:hover,
          .metro-blue .genesis-nav-menu li:hover a,
          .metro-blue .navigation li a:hover,
          .metro-blue .navigation li.active a,
          .metro-blue .post-comments a,
          .metro-blue .sidebar .enews-widget input[type="submit"],
          .metro-blue .genesis-nav-menu li li a,
          .metro-blue .genesis-nav-menu li li a:link,
          .metro-blue .genesis-nav-menu li li a:visited,
          .metro-blue .post-comments a:hover {
          background-color: #5bb1f9;
          }

          John

        • Tim,

          I should probably mention that I reworked, added to, and cleaned up the CSS quite a bit for Cloud Peak Energy, so it may or may not apply to your site depending on the area in question.

          Are you using Firebug with Firefox or Chrome to work on your site? That will help you zero in on what needs to be changed, and where to find it in your style.css file.

          John

          • Thanks John! I found that the CSS for the default color was working correctly in terms of hover/navigation, so I simply swapped the color value with the one I wanted (in 8 places), and it works like a champ.

            I also went back and made the edits you suggested to the other colors including blue and will use Chrome to try and debug.

            Thanks,

            …Tim

      • I think I followed everything you said to a “T” but I’m still getting the green background showing up behind my logo… any help would be appreciated. Thanks so much!

        • Hi Austin,

          If you remove the comma and selector

          , .metro-green #title a

          from the end of line 1674, and then remove

          background-color: #F96E5B

          from line 530 that should take care of the background color behind your logo.

          And speaking of your logo, I’d really recommend editing (cropping) your logo image to remove all that extra transparency space. By doing that you could get it down to, say, 435 x 95 pixels, and it would scale much better on smaller screens/devices.

          John

          • Thanks for the quick reply. I am using Coffee Cup HTML editor and the line numbers must not match up to what you’re seeing.

            I searched the CSS file for , .metro-green #title a and nothing is found (I deleted it as per your instructions above).

            I can find 6 occurrences of background-color: #F96E5B but I don’t see how any of them related to the header area.

            Would you be able to expand those two sections of code so I can look for what is before/after the code I need to modify?

            Thanks a million!

          • What do you know!?!? I got it working! Thanks so much for your help.

            One more (hopefully) quick question. Is there a suggested size for the background image? I’m using one with the “tile” option and it doesn’t look anything like it’s supposed to.

            Thanks so much!

          • Nice work! RE the background image, the default image on the StudioPress demo site for Metro is 1440 x 900 px, so I would start with something like that. Your settings for the background image should be, “Center,” “No Repeat,” and “Fixed.”

  11. Hello John, I’m back! I recently decided to modify my logo a little and make it transparent. I discovered 2 things. The first is that the blue background came through when I made the logo transparent. The second is that when I did responsive testing, the blue background shows up off to the right with the current logo when viewed in the small tablet or i-pad setting. I might have missed something the first time you helped me correct my logo issues.

    What do you suggest?

    Thanks for you help again and I will continue to support your site by sending people your way.

    • Hi Shea,

      It looks like you’re using the eleven40 theme with the blue color style, correct? If so, I think the directions I gave to James in a previous comment in this post would apply to your site also.

      It looks like your line numbers in style.css are a little off from his, but if you just match the selectors I’ve listed there you should be able to see what needs to be done to make your site work.

      John

  12. Hi John,

    I agree with you as it relates to SP. I have a Love/sometimes like relationship with them when going through all the hoops for some customizations. Logo headers have been my nemesis for a while now.

    Anyhoo….I was very pleased to come across your directions here. Easy, clear and concise even for me…. not being a coder.

    I followed your instructions for my site and can’t understand why the logo is not centering vertically. I seem to have about 15px of extra space above my logo. Fortunately I have no problems with it horizontally across mobile devices.

    Can you take a quick look and tell me the last piece that I may be missing. I am guessing it maybe because I am still using the beige background image. I hope not, because I want to use a patterned background there once I finish getting the logo worked out.

    The site is http://spa.byrobin.info/

    Thanks so much for taking your time to answer my question.

  13. John I figured it out. It was the padding on title that was too large. Thanks again for your awesome instructions.

    • Robin,

      Glad to hear it – that’s always the best way to learn, in my opinion. I was on-site with a client today and hadn’t got to your question yet, so thanks for letting me know that you were able to figure it out.

      John

  14. Great, even for a Genesis newbie this a easy :). Just a good tutorial, I just followed the steps.

    Thanks!

  16. Hi John,

    Fantastic tutorial, from topic and instructional perspectives! Well done! Should be on the StudioPress site as well.

    Just wondering if you had given it a test with the Genesis 2.0 Sample child theme yet? Or had any advice in using in Genesis 2.0 HTML5?

    Thanks!

    • Hey Marc,

      Thanks for your kind words! RE Genesis 2.0 I’ve been so busy with other projects that I haven’t taken the time to look at it in much detail. I’m anticipating spending some time with it whenever WordPress 3.6 drops, but who knows when that will be anymore? 🙂

      Good question though. If you give it a shot with 2.0 I’d love to hear how it goes.

      John

  17. Just wanted to add my voice in thanks for creating and maintaining this great tutorial! Thank you!

  19. John, thanks so much for posting this tutorial! It is exactly what I was looking for. Unfortunately I haven’t been able to make it work that well, I’m getting some weird line formatting that I can’t figure out. If you take a look you will see what I mean. It’s at http://www.boosterland.com. And it’s the Executive theme on genesis. Any tips or insights on what I may have missed? For the record, I’ve updated “functions.php” and I’ve updated the CSS, along with the genesis config tweaks. Thanks in advance!

    • Richard,

      You’re welcome, and thanks for giving it a try! Rather than posting the CSS edits here I thought it would be easier to download your style.css file and make the edits that you need. I’ll send that to your email address that you used for your comment. I didn’t delete anything – just commented out and made the necessary changes. I’d recommend keeping a copy of your current style.css and then uploading the one I sent over, and see how that works for you.

      John

  20. Thanks so much for this tutorial, I have a few questions that I wanted to see if you could help me with.

    1. I want the logo to be bigger than it is now. I saved the image I’m using as my logo as 140 height, but it seems to be displaying smaller than that, can you please tell me what I’m doing wrong, and how to correct it. I can’t seem to figure it out.

    2. How can I get the logo to center when I am resizing the browser instead of staying to the left?

    Thanks so much for your help, and for taking the time to write this up!

    • Hey Rick, welcome back!

      RE question 1, and assuming we’re talking about this website, you need to resize your logo so that it isn’t the size of the header (for example: http://db.tt/1VgNcF4M). I guess I assumed that this was implied by not using the StudioPress background header image…

      RE question 2, you’ll need to upload the new logo before we get to this, and it might work itself out with the new image.

      Out of curiosity, what theme is this that you’re using?

      John

      • Hey John…this tutorial is exactly what I needed after pulling my hair out trying to get the logo to link to HOME.

        I am still having the same challenge as Rick (question #1) though. The logo is now smaller than intended in full screen. The logo does get huge in various responsive sizes, but I think its ok. It’s the full screen that needs to be bigger.

        Unfortunately, I didn’t quit understand your response on this one. Can you clarify (for a newbie) on how to make the logo bigger in full screen.

        Thanks again for the tutorial and for the help.

        • Hi Steve,

          What’s limiting your logo size now is the width: 25%; declaration in #title-area, line 196 of your mainstyles.css.

          At the moment, your logo image is 1354 px wide, which is really big. If it were me, I’d resize it to 300 px or so, or whatever you’d like it to be, and then finish with some CSS tweaks to bring it all together.

          Let me know how that goes,
          John

    • Hey Tony,

      Glad you liked it. I’m assuming you meant centering the logo vertically? I updated your style.css file and you can download it here from Dropbox: http://db.tt/lfWjwDVt

      I commented out a bunch of stuff in the header area you don’t need anymore, and adjusted the margins on your logo. Make sure to rename the file to style.css if you’re just going to use it as is, or you can copy the changes over to your existing file.

      John

      • Awesome, thank you so much! One last thing. When I look at the header background on this site you listed as a sample, the background is responsive as you shrink the site:

        thegathering.bhwebworks.com

        However when I move my browser window smaller, the background image doesn’t stretch. I get a black background under it.

        Does that make sense? Any idea why?

        • Tony,

          That does make sense. You’ll need to change the ‘repeat’ value for the #header background image. This might be a setting you can change under Appearance > Header, but I’m not sure about that. Like I mentioned in the post above, I disable the custom header option and just hardcode the background image into the CSS.

          Either way, you’ll want to change ‘no-repeat’ to ‘repeat-y’ so that it repeats vertically when the screen is resized.

          John

  22. Greetings,

    I am eager to make this work, but I’m afraid I’m missing something…hoping you can provide a needed lift. I’m using the Outreach theme, reading your instructions and also following the instructions posted in the “Outreach theme issue” post you linked to above. I also looked at the stylesheet you sent Tony above and tried copying the relevant settings, but I’m getting nowhere. Here are the issues:

    1) using your process, I have no header image showing and the logo stays left justified as I zoom in, instead of centering responsively.

    2) using the instructions from “Outreach template: issues with the header image” linked above (which includes a call for the header image in the css) I had the header background but the logo did not center.

    What you’re looking at ( http://www.familyshelter.org/) is a combination, and yet the results I’m looking for are just out of reach…

    If you’re willing, I’d appreciate your input…

    Thanks,

    Sam

    • Sam,

      Here’s a revised style.css for you to try out: http://db.tt/hYtBiKHj. (This is probably obvious, but you’ll need to rename it or copy it over…)

      Compare it to your current stylesheet to see what I commented out, but mainly all or part of lines 182, 195, 219, 241, 2048, 2052, and 233.

      Also, I added line 2327, #title img { max-width: 80%; } in the 600px media query section to scale your logo down a bit.

      Let me know how it goes,
      John

  23. John,

    Wow. It’s going to take me some time to go through and learn from this…but you properly took me to school. I really appreciate your help…anything I can do for you…

    Take care,

    Sam

  24. Hi,
    This was an excellent overview– however, your Gist embeds were removed!

    (I found them thanks to help from Google, but you might want to put them back…) THank you!

    • Thanks for letting me know about the Gists not showing up. Sometimes they don’t pull through from GitHub and refreshing the page usually works, but just in case they still don’t show, I’ve linked the Gist titles to the actual Gists now.

      John

  25. Hi John,

    Thanks for posting this. I’ve implemented the steps and the height of the header area is getting blown out. The image I’m using is 319×79. Can you take a look and see if you can help? I’m using the same theme as you (my favorite studiopress theme by far) and I want mine to look like yours height wise.

    Thanks,

    Ted

    • Hey Ted,

      I would change the margin for #title to 0 (zero) in line 199, and add margin-top: 11px to #header .menu in line 273.

      #title { margin: 0; }
      #header .menu { margin-top: 11px; }

      John

  27. Hello,
    I’ve tried to follow the steps outlined for the education theme however I’m stuck and had to revert back. I couldn’t get the site header and description to go away despite adding the blocks to functions.php. One thing i’m not sure of in styles.css is whether or not all css above changes specified apply only to /* Image Header - Partial Width */. Are there any changes to /* Image Header - Full Width */ ?
    Also – I had Genesis Simple Headers installed, even after completely removing the plugin I couldn’t get your customization to work. The closest I came with this plugin is centering the logo but with the headline and description left over. I’ve gone over the changes numerous times and just can’t seem to get in. Any help would be most appreciated!
    Thanks!

    • Hi Yarin,

      I’d need to see the site with your image logo in place before I could tell you what you need to change. The real variable in the above instructions is in the CSS, which, while similar, is also different for each website.

      John

      • Hi John,
        I was finally able to get the image to appear, as frustrating as it sounds the root cause of the issue was simply my logo.png being overwritten with the default “Education” header image. I could use your help on a few more tweaks to the header image though..
        When viewing partial page width (browser window resized) or on a mobile device the image appears offset from the primary menu and on mobile completely cut off. Any idea how to resolve?
        I tried repeat-y but at certain page widths the logo still does not display properly.

        .header-image #title a {background: url(".images/logo.png") repeat-y center left;}

        Thanks!

        • Yarin,

          Looks like you upgraded to Genesis 2.0 already – how’d that go for you?

          There are still a few CSS changes that I would make:

          In line 381, #title-area, comment out the padding and width, and add margin: 10px 0; (that should center your logo vertically)

          In line 397, #title, comment out everything except margin: 0;

          In line 4925, #header .widget-area, change the width: 560px; to width: 100%;

          For more CSS tweaks you could check out what I did on http://gracechurch.bhwebworks.com/ with Firebug.

          John

  28. I love this tutorial and have used it on multiple sites, but I think the freshly released Genesis 2.0 breaks it… Hope it’s a quick fix, because I can’t figure it out! I quickly reverted back to 1.9.2, but updating to 2.0 made the logo image disappear. This is the only site I’ve tested it on: http://thelaunch.snemnyouth.com/ (child theme: Modern Portfolio)

    • Jordan,

      Thanks for the “heads up” about Genesis 2.0. I was planning on starting the transition to 2.0 today on some of my sites that use this logo method, so I’ll hopefully have an update very soon.

      Nice one-pager, by the way!

      John

      • Sweet! I look forward to your solution. And thanks for the compliment… I wanted to implement the trendy parallax effect on that one, but ran out of time (combined with a lack of jQuery prowess).

        Cheers!

    • Jordan,

      I’ve updated five of my demo sites to Genesis 2.0 and the logo replacement still works flawlessly. Themes on those sites are Metro, Executive, Outreach, Education, and Agency.

      I then tried installing the new Sixteen Nine Pro theme (HTML5) on another test site and it works there too. I had to comment out the custom header code in functions.php and make a small change to the CSS, but that was expected. Actually, the CSS edits were easier and fewer in the new HTML5 theme, which is good news going forward.

      So I’m not sure what you ran into with your Genesis update? If you’re going to try it again you could let me know when and I might be able to help you troubleshoot it.

      John

      • I just re-updated to Genesis 2.0, and it’s gone again: http://thelaunch.snemnyouth.com/

        Feel free to take a look. this is what I have in my functions.php:

        add_filter( 'genesis_seo_title', 'bhww_filter_genesis_seo_site_title', 10, 2 );
        function bhww_filter_genesis_seo_site_title( $title, $inside ){
        $child_inside = sprintf( '', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), get_bloginfo( 'name' ) );
        $title = str_replace( $inside, $child_inside, $title );
        return $title;
        }

        • In line 555 of style.css, .header-image #title, .header-image #title a, .header-image #title-area, comment out or remove text-indent: -9999px; and you’ll see the logo again…

        • And if you remove line 515 entirely, .header-image #header, .header-image #title-area and its padding:0;, that will restore your header to what it looked like before.

          • haha, i was working on it while you were probably firebugging. But we’re looking good now! I removed line 515. Padding is back the way it should be. Thanks for the help! Feel free to delete one of those three duplicate functions.php posts up there…

  29. Hi, John

    We met through the StudioPress community forum. ¶ The issue I’m having is post-Genesis 2.0.0. After placing the “Filter the genesis_seo_site_title function” code in functions.php per your instructions, I’m not seeing the Genesis > Theme Settings > Header> Image Logo. Also, I am seeing this code in functions.php:
    // Add support for custom header
    add_theme_support( 'genesis-custom-header', array(
    'flex-height' => true,
    'height' => 150,
    'width' => 1080
    ) );

    Have you seen the “flex-height = true” before? Please advise and, as always, thank you, John!
    Peace to you in the Black Hills,
    Doug, in Mansfield, MA 🙂

    • Hi Doug,

      Is the site you’re referring to the one linked with your name in the comment? Metro theme, right?

      I don’t think the issue you’re having with that site is related to Genesis 2.0. You’ll still need to comment out or remove the “//Add support for custom header” code before this will work, and I’m pretty sure that was there before Genesis 2.0. After you comment out that code you should see the Theme Settings > Header > Image Logo option in your admin.

      You also need to upload your logo image to the Metro theme’s images directory, and then finish up by removing the now-extra CSS in your style.css file.

      I’m actually not familiar with “flex-height = true,” but I did look in my copy of Metro and I do see it there, though it’s commented out with the rest of that code.

      Hope that helps,
      John

      • John,

        Thank you. I commented things out in functions.php and put the logo.png in the Metro/images folder, and fixed the css and now everything is beautiful.

        I really appreciate your home page design and your mission statement, by the way; I’d like to stay in touch.

        Peace, Doug

  30. I was about ready to cut my head off or blow up my website. But your tutorial returned me to a rational state of being. At least more normal. Thank you so much. The header is now centered. Whew. I tried many different things – tutorials, etc. But yours was the only one that I could figure out how to do and worked!

  31. This is clearly above my comfort level, but I’m saving this tutorial for the future! I’m a recent convert to Genesis and am seriously considering the new eleven40 pro theme for my personal blog. I clicked over to one of the sites you built, Bella Partners. Did you use the Genesis slider plug-in for their home page? I love the look of the rotating images. I’m wondering if I can use the plug-in to showcase recent posts. How did you determine the correct size to use for the images? I appreciate your sharing these steps – not many do so freely 🙂 Thank you.

    • Hi Carrie,

      Welcome to Genesis! That slider is Soliloquy, which I use on pretty much all of my sites. I tried the Genesis slider once but I can do so much more with Soliloquy. I’m pretty sure you could use either one to showcase your recent or featured posts. Deciding on slider image sizes is a combination of using Firebug, good old trial and error, and just having a sense of proportion, I guess.

      John

  32. John,
    Great article. I’m nearly there right out of the box. Seem to be getting two logo’s. I reversed my steps and deleted any header image but I think the Education theme is grabbing logo.png and so is the code. I’m sure this is easy but can you nudge me to the fix?

    Also, the mobile responsive work on Grace Church using Education theme is great… especially the handling of the menu as a drop down. Is this a plugin or CSS making that work. That solves so many problems. I’d love to know how you did it.

    Thanks again.

  34. Thank you for the tutorial. This is exactly what I’m needing to do. I’m adapting the Education theme. I think I’ve followed the steps outlined fairly closely, but the top nav seems to be covered up by the body section, which is higher than it should be and is shifted to the right. I’m using Firebug but must be missing something obvious :(. The test site is at http://cmsrv.com/cms.

    • Hi Kevin,

      Glad the tutorial was helpful for you.

      For some reason the CSS in the Education theme is a little tougher to work with than it is in the other themes. In your case there are three things to adjust to bring everything back in line: set a min-height on the #header that matches the #header .widget-area div (95px), remove the padding in the #header .widget-area, and set the width of the #header .widget-area to 60% (though that width could vary depending on how many menu items you have).

      Here’s a modified version of your style.css with those changes and some other changes that clean up the header area CSS: style-cmsrv.css. I’ve commented all the changes I made (I think) so you can see what I did. Of course, if you use it, rename it to style.css before you upload it, and keep a copy of your current style.css.

      John

  35. In your article is says to go to Genesis > Theme Settings > Header and set the Use site title/logo but I do not see this option under theme settings. I am on genesis 2.0.

    Please advise, Thanks

  36. Hi John – thanks for the info above – I managed to get a test logo showing up on the Executive theme.

    A client is asking if a “hover over” effect could be added to the logo image, so when the viewer hovered over the logo, the word “Home” would appear, and they would click to the Home page. (They are avoiding having a “Home” menu tab).

    My thought is that I would have a second image, the same as the logo.png, but with “Home” added in a transparent area. This image would appear when hovered over, giving the “magic Home effect”.

    Is this possible?

    The test website is the one I sent to you in the message header.

    Thanks,
    Ken.

    • Hey Ken,

      What about just changing the title attribute in the image source code from title="%s" to title="Home"? I’ve only tested that just now in Firebug, but it would be the simplest solution, it should work on most non-mobile browsers to show a pop-up/tooltip that says, “Home, and it would leave the logo intact visually.

      John

  37. Thanks John,
    I made that change.
    It’s funny, when you send out a question, it allows you to think more clearly about it, and I realized I was getting a bit overcomplicated in my thinking. A couple of minutes after sending the question, I went to the css and added a background image to the title hover, and the “magic Home” appeared.
    It was a duplicate of the logo.png image, with the word “Home” added in a blank area.
    It acts like a mouseover effect on the hover.

    I’m not sure if we’ll use the effect, but at least I know it is possible.

    Thanks for the PHP change suggestion – and for being a “thought catalyst” 🙂 – it’s good to have more than one approach.
    I’ll show both to the client

    Ken.

    • Good question. I did use backgrounds; they’re just hidden by the content area on mobile devices. It looks like that’s a difference between the old Metro, which I’m using, and the new Metro Pro.

      Metro Pro has .footer-widgets, .site-container set at width: 94%, keeping just a bit of the background showing around the edge. Personally, I’d rather give that space to the content on mobile devices, but you could change the CSS easily enough to have the background showing.

      • Thanks john. I did notice the update metro pro. Used it and it does solve the themes responsiveness. Also menus are now properly displayed in mobile devices. Thanks again

  39. Hi John –

    I’m having trouble getting my logo to appear on my site. I’ve followed your directions exactly, and while there is a clickable space where my logo SHOULD be, the logo image itself isn’t showing up. At the moment I’m editing my theme using the Test Theme plugin, so if you head to my site you’ll see a different theme than the one I’m currently working on.

    I’m building my theme based on the Genesis Child Sample Theme. And, weirdly, I had no trouble adding it following your instructions yesterday. But when I decided to start from scratch today, for some reason it isn’t working. Any advice would be appreciated/amazing!!

    Thanks!

    • Hi Courtney,

      Sounds like a CSS issue, though it could be missing the image somehow – pulling from the wrong directory maybe? I’d have to see the site to really know what to tell you, but it sounds like that won’t be possible with the theme plugin that you’re using…

      John

  40. Hi John,

    Thank you for this post, it really helped me solve the header image problem.

    I really like the City Church example site layout you feature in this article. I’d love to add a slider to my site (www.ollyhermontaylor.com). I’ve got the Soliloquy plugin but don’t know where to add it to the site to make it display as in your example? I’ve tried adding it to the Home Top widget but obviously it is resized to the size of that container. Would be really grateful if you could show me how to add a 1080 x 350 version, as in City Church site, just under my main nav menu (keeping all of the content below as it is?

    Many thanks in advance for your help.
    All the best,
    Olly

    • Hey Olly,

      The short answer is that you add it to your home.php or front-page.php, depending on whether you’re using Metro or Metro Pro, with a function and action. Then you’ll probably have to style it in your CSS.

      I’ve had several people ask about this, so I think I’ll write a blog post with the details of how that’s done. Should have that posted soon, maybe today yet.

      John

      • Hi, John

        Now that there’s Metro Pro in addition to Metro, will you be or have you already created a tutorial for the background header image taking into account the new class names? For example, in Metro, the header is #header; but in Metro Pro, it is .header-image.

        Thank you, John.
        Doug

        • Hi Doug,

          We shouldn’t need another tutorial since all that changed there, for our purposes, are the names of the CSS selectors. The way you style those selectors remains the same.

          In the examples I listed, about half of those are currently using HTML5. So in the end, it’s still just a matter of using Firebug to determine what and where in your style.css needs to be changed.

          John

  41. Hello John, I think I was the first person that you helped with the logo issue. You’ve created quite a following since then!

    Anyhow, I just discovered that since making these changes my site doesn’t list a title for the H1 tag on the home page. I struggled the first time to get the loge right and wondered if I had inadvertently taken something out that should have stayed. I read your 2 updates and have to agree that it’s not good to hide text in an image after everything I have read from Google. Is there a correct way to fix this? I really would like to have a title for my home page for SEO purposes.

    • Hi Shea,

      At some point after posting this tutorial I updated the code to improve its SEO, and as an early adopter you probably don’t have that update. You should be able to copy the updated code in the post above into your functions.php and replace what’s there now. After that, you should get both an alt tag and a title tag for your logo.

      John

      • Thanks John. I did as you instructed and replaced the code for the functions.php with the updated one in the post. When I did an interesting thing happened. My site name and tag line that is entered into the theme customization area suddenly appeared underneath my logo. I had to delete my site name and tag line in the theme customization menu to make it go away. I checked for the H1 title after that and it still is not there.

        I had looked earlier for help at Studio Press and I finally received this answer: “You are using a logo image in the H1 tag area and not text. I just viewed it and matched it to a couple others who are using text.” It was followed with what was found:

        </h

        I asked how to correct it but as yet have not received a response. What am I missing in the setup that has caused this?

        Thanks again.

        • Shea,

          Did you do step #6, “Remove the site description”? That was also added later and you might have missed that step.

          The code that adds the image logo gets the alt and title tags content from the Settings > General “Site Title,” so you don’t want to delete that. Once you’ve put it back you’ll need to hide it with CSS, I believe.

          Let me know when you’ve done those two things and I can check it for you.

          John

          • Hello John, yes I missed step 6. Thanks for pointing that out. After going over every step again my logo is functioning as it should, but I still don’t have a title for my H1 tag on the home page.

            Thanks for sticking with me!

          • Shea,

            Actually, your H1 tag does have a title – though a better way to say that is it uses the title attribute of the logo image that’s inside the H1 tags. The tag itself isn’t meant to have a title.

            More importantly, I ran your site through http://www.seoptimer.com/ and it returned a 403 Forbidden message and wasn’t able to analyze the site for SEO. That’s something you should really attend to, and then see how your site fares using that tool.

            John

          • I saw what you meant by the 403 forbidden message and started to investigate. I even called my hosting company to have it checked from their end. Their final conclusion was that everything is fine and for some reason Seoptimer is returning the message for unknown reasons. It does the same thing for another site that I have. It may be that they crawl the site so fast that the server denies access. However, I tried multiple seo optimizing sites including WooRank and SEO Workers and they all worked fine. I’m not too sure if I should be concerned or not!?

            That said, they all had the same conclusion. There is an H1 tag, but there is an image in it instead of text and recommended fixing it. Suggestions?

            And one last question John, is it possible to create a shadowing for the logo to create a nicer look like it is lifted slightly from the page?

            Thanks again for your time and patience.

          • Shea,

            I wonder where that 403 came from? I just checked your site using Firefox Web Developer and it returned a 200 header, so you should be good there. Sorry for the “false alarm”!

            Regarding the H1 tag and how to handle it, the opinions are split. For example, see the edit dated July 5, 2013 in the post above for links to several places that discuss this further. I for one am good with how this logo method handles this.

            Looking at the source code for your home page, the H1 tag has a link with a title attribute of “All Garage Floors” and the image has both an alt and title attribute of “All Garage Floors,” so I’m convinced that you’re covered there. Google doesn’t “see” the image, but it’s going to see “All Garage Floors” three times inside the H1 tag, and I don’t think you can legitimately improve on that.

            RE a shadow on/under/behind your logo, that depends on how cross-browser compatible you want it to be. You could do it with CSS but older versions of IE aren’t going to see that, and you can find out from your analytics what browsers your site visitors are using. Personally, I’d lean towards doing it with Photoshop and integrating it into the image.

            John

          • John, thanks so much for the great information. I realize that the H1 tag for the homepage doesn’t carry as much weight as say a post or separate page since the homepage does have the site title tag. I think I’m comfortable with the way it is regarding your explanation.

            Great idea about creating the shadow. I don’t know why I didn’t think of that to begin with!

  42. Thank you for posting this! I was trying to figure out why they used a background image… Would it be possible to add the blog name after a logo? If I wanted to use text instead of an entire image for the header?

    • You’re welcome, Jake. I think I’ll need some more information to answer your questions, and the site in question would help too.

      When you say “after” do you mean below or to the side of the logo?

      John

  43. Hi, John

    Now that there’s Metro Pro in addition to Metro, will you be or have you already created a tutorial for the background header image taking into account the new class names? For example, in Metro, the header is #header; but in Metro Pro, it appears to be .header-image.

    Thank you, John.
    Doug

  44. Thank you so much!! I’m VERY new to CSS and I followed your instructions to a T. It worked beautifully.

    I’m running on Balance child theme and added the “background-position: top center !important.” I didn’t break my site so I guess that addition was okay.

    • You’re welcome, Julie. Nice job trying something new by adding your logo image to your site!

      I read through some of your blog…were you living in Rapid City before venturing out in the RV? We’re in Spearfish, my wife homeschools our four kids, and we’re living in a pretty small space ourselves. I’m seeing some similarities here… 🙂

      • Yes John, we were! We just moved away from Rapid about 6 months ago. I really feel for you guys and that NASTY storm!! I miss homeschooling in SD and the amazing support. FL is proving to not be as HS friendly.

        Well it turns out it if you replace your style.css sheet with the the default (to correct some color errors you made) your banner goes back to being unresponsive. LOL! Some day I’ll learn, but I’m back today to follow your instructions yet again.

        Thanks again for these instructions! Best wishes.

  46. Great tutorial – it helped a great deal getting me almost all the way there. I had a couple of snafus with Genesis 2.0 and here is what I had to do. Note that I changed the default color to blue and used #336699 for the blue color:

    (1) After I finished the steps, I had a background color that still filled the area between the logo and the right widget area. I had to remove the background color in css section 13 for colors and commented it out:

    .metro-blue #title a {
    /* background-color: #336699; */
    }

    (2) Once you do that, all your tabs for comments will turn the default pink. You need to then change the default for comments here so that the old pink was replaced with my color.

    Change this: background-color: #f96e5b; to the below:

    .post-comments a {
    background-color: #336699;
    }

    If you want to see an example of another example of a variation on this theme using my added code, you can see my website variation here using Metro.

    • Michael,

      Glad it worked for you, and thanks for adding your tips to the collection here. In addition to the edits you mentioned, I’d also comment out line 563, .header-image #title, .header-image #title a {width: 100%;} so that only your logo is clickable, and not the entire header.

      John

      • John – Wow you’re quick! 🙂 Yes, that worked like a charm. It’s probably best to include that as well regardless of what I do with the right side of the header. I’ve noticed that the CSS code for the content (logo) and widget widths are tied into what goes below it (the content areas and the sidebar widget). I’m surprised that so much whitespace is left in the header by default and not configurable. So far I haven’t been able to get a leaderboard in there (or something wider than the widget space) but that is the eventual plan. I may end up doing what you’ve done with the Church site (wonderful job!) so as not to lose the responsive nature of the header areas. Once again…. many thanks to your great tutorial – a true lifesaver which saved me much time!

        • 🙂

          You could also change the percentage widths of your #title-area and .header-widget-area, which are currently at 65.5% and 31.1% on the full-width site. That would allow you to make use of the space to the right of the logo, if I’m understanding you correctly.

          • John – that’s exactly what I tried. But when I did, I found that the widgets in the sidebar also changed as did the content area to match what I had in the header.

          • John – apparently Metro 2.0 just came out two weeks ago and it’s fully HTML5… which I just upgraded the them to and it’s awesome! 🙂 The problem illustrated above by the header widget area appear to be fully resolved with the new Metro. It took a little work to fix the way I liked it but your guide is still right there for version 2 and gets you what you need. Once again, thank you for your indispensable assistance!

  47. John I have a background image across the whole of the header, Now I want to add social profiles widget in the top right but when I do the social media forces the loss of part of my logo. I need to bring the social media into a front div I think, suggestions please

    • Hi Charles,

      If I were you I would crop your logo down to about 160px wide, instead of the full-width of the header area, and that will free up the space for widgets in that header area on the right side.

      John

  48. Spent an hour or so trying different solutions from the StudioPress forums to apply to the Outreach theme, and then found this. Thank you, thank you! And it’s even better that it comes from a South Dakotan! Lived there for 10 years and am hoping to return very soon. I’m close by in Iowa, but it’s just not the same.

  49. Hi John

    Great post and easy to follow, I was doing my nut with my logo banner not shrinking with the responsive design.

    Followed your instructions and hey presto all sorted.

    Stuart

  50. Hi, John:

    I’ve been recommending this tutorial to anyone who asks, but haven’t used it myself until tonight!

    The logo I’ve added renders perfectly on a mobile device (Thank you!!!!), but I’m missing something that I can’t figure out – on my laptop, the logo gets cut off on the right – I’m not sure what I should remove from the CSS to make this right.

    Any suggestions would be appreciated!

  51. Hello, John! Appreciate your tutorials very much. I am using the Mompreneur theme. I have read, re-read and followed this tutorial. I was unable to get the logo to show. The only extra steps that I have taken (out of frustration and not sure that it matters) is in addition to uploading the logo.png to the theme/images folder through file manager in Cpanel, in addition I overrode the header.png, HeaderImage.png with the logo.png. Nothing. I did finally get an image box to appear after commenting out text-indent, height and min-height decs. In firebug the image link is: http://ruebird.com/wp-content/themes/mompreneur/images/logo.png However when I put that in the browser I get a 404. Appreciate your guidance. Kindly, Kimberly

    • Hi Kimberly,

      You’re very close, but it looks like you capitalized the “L” in logo.png when you named your image and uploaded it to your images folder. If you rename the image as “logo.png” you should see it on your site.

      John

  52. Wow — thank you kindly for your prompt response, John. Don’t know whether to laugh or cry regarding the capital “L”.

    I have an interesting new development after that was corrected. On my notebook the logo is cut off about halfway .

    The logo displays beautifully on my iPhone, yet the social media flags (buttons) have disappeared!

    Kind regards, Kimberly

    • Kimberly,

      You’ve got a couple things going on there. Your #title-area on a desktop/notebook has a width of 620px so it’s only going to show that much of the logo in that space. Also, the #header .widget_nav_menu is set to not display when the screen width gets below a certain dimension, which is why you’re not seeing those social media buttons on your phone.

      I’d strongly(?) recommend separating your logo, Rue Bird Market, from the rest of the background header image with the flags and the text “happy home goods.” If you do that your actual logo will be around 305px x 200px, and will look and perform better on smaller devices.

      Then, I would add the full width banner, without the logo part, as a background image in probably the #header div. You might have to add something like overflow: hidden; too, and then I think you’ll see the full banner under the header widget area on the right.

      Getting the social media buttons to show on mobile devices would take some work, but I think it could be done.

      Let me know how that goes for you,
      John

  53. Thank you, John. I have just learned, after an inquiry to the theme developer, that this site is not coded for the social flags to display on mobile devices. I’m okay with that.

    I just need to address the banner displaying on a computer screen now. I really like the idea of parcelling up the logo, flags and tag line.

    I am intermediate, at best; do you mind expanding a bit on your instruction, with that in mind? I absolutely do not mind paying you for your time and expertise. Contact me through email in that regard.

    Many…many thanks, K

    • Hi Marley,

      You’re welcome! I wouldn’t say anything went wrong – you just have some CSS work to finish up.

      To see your logo you’re going to want to remove the background, margin, and min-height properties from line 203, #header, remove line 223, #title, remove line 232, #title a, #title a:hover, and then remove line 255, .header-image #title-area, .header-image #title, .header-image #title a.

      Beyond that, you may want to add something like 10px of padding to #header, line 203.

      John

    • Hi,
      Got it working for me. Apparantly Facebook has some image requirements and some particular preferences. I found out it should be at least 200×200 and preferably a squared images and preferably in hundreds: see this link: http://stackoverflow.com/questions/15421521/ogimage-open-graph-warnings-image-size

      Not all designs will look good with such a logo so I’m using the yoast seo plugin and there I can Add Open Graph meta data so I added a specific image to serve as my thumbnail image for sharing with facebook.

      I used Facebook linter to check: https://developers.facebook.com/tools/debug

      • Hi Julia,

        I noticed that same issue with Facebook sometime after I posted this article. Thanks much for running down those links and sharing the solution you found – nice work!

        I wonder if there’s a way to do that without installing Yoast’s SEO plugin? I’ll have to see what I can find about that.

        John

        • Hi,
          I’m curious about that too.

          Found some more information that could be usefull. I found out that you could ‘attach an image’ to a sharer link, but it seems sharer.php is not officially supported anymore so it’s a bit unpredictable: http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/

          It’s being replaced by like and feed function of facebook:
          https://developers.facebook.com/docs/reference/dialogs/feed/

          So it would be possible to contstruct an html link with image parameter but the feed dialog requires a facebook app id.

          I guess that would work, but if you have a new site, I think you would need to make a new facebook app id for that site. And that seems to be a lot of work if you only want to include an image with a share link.

          Also if facebook changes, you would need to change all share links…

          • Julia,

            That does sound like a lot of work, but I’ll bet that someone here finds it useful for their needs. Thanks again for researching and sharing it with the rest of us!

            John

  56. HI John
    Thank you so much for this great instruction — I am using the Outlook theme and wanted my logo to be responsive and full width across the top; I used two different solutions from the StudioPress Forum but none were quite right. Using your instructions and several of the posts above, it looks like my logo is now responsive and working!! Thank you!!!

    I do have two questions; if you don’t mind–
    I would like to have the logo image centered more across the top; do you think this is possible?

    The second thing is – if you begin to minimize the screen, the logo responsively changes – but at one point, it shrinks and then pops back to fill the screen size. Looking at the site in StudioPress/Responsive’s page, you can see this on 1024 width. Can you think of any way I could fix this?

  57. Hello John,
    I hope you can help me. I spend days and days to get my logo in my website header and nothing worked for me. I’m scared to use your tutorial because it will take me again a couple of hours and maybe it won’t work for me at all. Can you look at my website and tell me if I have to work through your tutorial nevertheless or do you have any shortcut for me? I am not experienced in wp but managed to build my website as it is now.

    My logo is 799 × 492 and I want to show it on the left of my website header. I use the outreach theme.

    I hope you can help me!
    Thank you in advance,
    Miranda

    • Hi Miranda,

      No need to be scared – the tutorial really isn’t that difficult. I’m confident that it will work for you, as I’ve used it on several sites that use the Outreach theme. I would recommend making your logo smaller though, since 492px would make a pretty tall header area, taking up a lot of screen space. Here’s a screenshot of what it could look like with a 195 x 120 logo: https://db.tt/imevwY17.

      As for a shortcut, the only way I know to make the process shorter would be to hire me to do it for you. 🙂

      Let me know how it goes for you – you can do it!

      John

  58. Dear John,

    I added your code but my imagename is

    http://www.opreismetmiranda.nl/?attachment_id=1181

    and where do I have to put it and what to remove??

    /**
    * Filter the genesis_seo_site_title function to use an image for the logo instead of a background image
    *
    * The genesis_seo_site_title function is located in genesis/lib/structure/header.php
    * @link https://blackhillswebworks.com/?p=4144
    *
    */

    add_filter( ‘genesis_seo_title’, ‘bhww_filter_genesis_seo_site_title’, 10, 2 );

    function bhww_filter_genesis_seo_site_title( $title, $inside ){

    $child_inside = sprintf( ‘‘, trailingslashit( home_url() ), esc_attr( get_bloginfo( ‘name’ ) ), esc_attr( get_bloginfo( ‘name’ ) ), esc_attr( get_bloginfo( ‘name’ ) ) );

    $title = str_replace( $inside, $child_inside, $title );

    return $title;

    } // End bhww_filter_genesis_seo_site_title

    • Hi Miranda,

      I think some of the code was stripped out of your comment, but in your case, because you uploaded your logo into the WordPress media library, you’d need to modify the following in the $child_inside line of my original code:

      Change this:

      img src="'. get_stylesheet_directory_uri() .'/images/logo.png"

      to this:

      img src="/wp-content/uploads/2013/10/Opreismetmiranda-logo-Kopie1.jpg"

      Alternatively, if you FTP your logo to the images directory of your child theme, you could just change /images/logo.png in my original to /images/Opreismetmiranda-logo-Kopie1.jpg.

      Or, leave the code as is and rename your logo to “logo,” save it as a PNG, and then upload it to your child theme’s images directory.

      Hope that helps!
      John

  59. Now I see a textblok on my website with the sitetitle in it instead of my logo…….where should I change what???
    Thank you in advance,
    Miranda

    • Miranda,

      For some reason WordPress added “http://cdn5.blackhillswebworks.com” to the img src code in my previous comment, and now your website is looking for your logo in my website. 🙂

      The safest approach right now is probably to try the original “Filter the genesis_seo_site_title function” code from the blog post, rename your logo to logo.png and upload that to your child theme’s images directory, and then make any changes after that is working.

      Also, from a style perspective you’re going to want to remove the white background from your logo and make the background transparent.

      John

      • John,
        I renamed my logo to logo.png
        Then I removed the “Filter the genesis_seo_site_title function” code that I already put in functions.php and replaced it with the Original code in your post. It doesn’t work. Maybe I have to change line 4 from your code? Line 4 says now:

        The genesis_seo_site_title function is located in genesis/lib/structure/header.php
        * @link https://blackhillswebworks.com/?p=4144

        What to do?

        • Line 4 is commented out, so you can leave that there for future reference.

          The code on your site looks right, but it’s not finding an image called logo.png in the Outreach images directory. Are you sure that you uploaded that image to that directory using FTP?

          • I don’t think you can just rename it – you’d need to save it as a png using your image editing software (i.e. Photoshop).

            I’ll refer you back to step 3 in the blog post for the explanation about where and how to upload the logo image…

  60. YESSSSSSS I have my logo on top of my website…
    Now the last changes: where can I make the logo appear higher so that I can see all of it??
    Miranda

    • All right! Now you’ll need to make some CSS changes. Try this: https://db.tt/lkCvkuzW. That’s a copy of your style.css with some things commented out.

      It also looks like your site is loading a custom image and color for the body background. You might want to check on that since it’s unnecessary and will make your website load slower.

      • I’m an unexperienced wp-customer so I need some explanation…
        1. The copy of my style.css how can I use it? Copy and paste all of it in the existing one or can I make en whole new style.css file and replace the existing one? How do I do that?
        2. Checking on loading a custom image and color for the body background…where can I see that?
        3. What can I do with the cleaner version of my logo???
        Thank you for your time!!
        Miranda

        • Miranda,

          1. I would keep a copy of the current style.css, and then go with either option you mentioned – copy and paste or make a new one and upload that to your server.
          2. I don’t know where that background image and color are being loaded for sure, but I’d look first in Appearance > Background.
          3. The logo you had in there had some left over pixels in the background, from what I could see. You could replace that with the one I linked to, but that’s totally up to you.

          You’re welcome!
          John

          • Hi John,
            I did it!! With your help of cources!!!! My logo is in the right position and I tried also to remove the logo with the flaws with your adjusted logo but that didn’t work for me but I don’t see the difference and its a website for old people: I don’t mind. I think no one sees the difference so let it be!

            Now I’ve come so far that I like to make just one adjustment if it’s possible. If not than I leave it!
            Is it possible to replace the black background behind the logo with a backgroundfoto like it was at the time that my logo didn’t show up??

          • Miranda,

            Looks good! Adding a background image is possible by editing line 183 of style.css and changing the background for the #header. If the photo/image is already uploaded to your site you can send me the URL for that photo and I can tell you what you’ll need to change…

            John

  61. Yes, with your help I managed to put my logo at the right place on the website!! THANK YOU very much.
    Now an adjustment extra but if its not working than I leave it the way it is..

    Is it possible to change the backgrond black colour behind my logo in a foto as backgrond?

  62. Hi John,

    Thank you so much for sharing this! I followed you steps but my logo is not working.

    May you help me troubleshoot? Thank you!

    • Hi Thoa,

      If you comment out or remove lines 1068 and 1076, both of which are .header-image .site-description, .header-image .site-title a { display: block; text-indent: -9999px; }, your logo will appear and then you can start adjusting your padding, margin, etc.

      John

      • Thank you so much John! You are a Godsend.

        I have a quick question. I was able to change the top header to white but I cannot figure out how to modify the primary header to be white as well. It’s currently #333.

        Thank you so much once again.

        Thoa

  63. Thank you so much for this! Your instructions were perfect with no tweaking at all on the Metro Pro theme. Amazing!

  64. Hi John,
    I am looking to have my logo hang over part of the slider using the Genesis Executive Pro theme. Is this possible? Not sure where to start.
    Thanks in advance.

    • Hi Lura,

      This might work, but you’ll need to edit your logo so that it has a transparent background rather than white. Then add this to your style.css:

      .home-slider.widget-area { margin-top: -40px; }
      .home .site-title img { position: relative; z-index: 999; }

      That should keep these changes on just the home page, and you may need to tweak the numbers to get it just right.

      John

      (Sorry for the duplicate – forgot to hit “Reply” the first time…)

  65. Hi, This is a great tutorial and glad I found it — for a few other sites I have, one using the outreach theme and another using the balance theme, another using the going green pro theme, but right now I am working on a site using the sixteen nine theme and having trouble replacing the avatar image with a logo. Do you have any tips on how do something similar to what you outline here but for the sixteen nine theme?

    • Hi Helen,

      I hadn’t used the Sixteen Nine theme yet, but I just now installed it on a site I’m developing, added the logo.png to the theme’s images folder, and the logo showed up instead of the avatar without me having to do anything else in functions.php or style.css.

      If you can provide a link to the site you’re working on I’ll be better able to help.

      John

  66. Hello! I’m using the Outreach Theme and for some reason this fix is only working on Safari. Chrome, IE, and Firefox don’t display the logo. Firefox actually displays the site title. Have you ever seen this happen? The site is http://thekatychurch.org

    Thanks for the tutorial!

  67. Hi,
    I’m using Genesis and Dynamic (love the former, starting to hate the latter). My header image is good until I open the site in firefox where there is a big white space where the header image should be.
    I don’t have the ‘Add support for custom header’ code in my functions php file.

    Is anyone having a similar issue or can anyone tell me how to get my header image to display in firefox?
    Any help much appreciated..
    Sarah

  68. Hi,
    I’m currently developing a site and followed the above directions to create a responsive header, but it has a blue border/padding around the header logo. I’m running Metro Pro on the Genesis Framework.

    • Hi Ted,

      If you remove or comment out line 970, .site-title a, .site-title a:hover and all of its declarations that will remove most of the blue background and make that header image responsive at the same time. Then you’ll need to add this code to the end of your style.css to finish removing the background color: .site-header .site-title a {background: none;}

      John

      • Thank you so much John! Super helpful and quick response.

        It seems that there is a very thin blue line still there?

        Also, if I wanted to remove the grey strip and extend the blue gradient all the way across the top of the page but have the logo shift as necessary like this http://www.fatburningman.com/
        what would be the best approach?

        Thanks again!

        • You’re welcome, Ted!

          Regarding the blue color at the bottom of the header image, check my original reply about adding the additional code to the end of your style.css file.

          Regarding the blue gradient and your logo, I would separate the logo from the header image using Photoshop, for example. Then take a slice of the header image blue gradient and use that as the background image for the body, like the grey strip that was there before. Finally upload the new, smaller logo in place of the current header image.

          • John,
            I’m making some good progress here thanks to your assistance. I’m getting the hang of things, but now I am left with a thick white line between my logo/gradient and menu bar.

          • Ted,

            That white line is there because your header background image isn’t tall enough, so it doesn’t completely fill the header area. You could add a background-color to the background declaration so that the bottom of the gradient blends in with that color. Something like background: url(images/logo.png) repeat-x scroll 0 0 #0d475b;

            John

  69. Hi, I’m glad I found this, but I’m wondering if this will work with partial-width headers/logos as well. I have my website header laid out the way I want, but am having issues with the logo being blurry. Would this solution work to fix this?

    Thanks!

    Maricar

    • Hi Maricar,

      If I understand correctly what you’re asking, then the short answer is “yes.” The longer answer is that if you follow this method, then terms like “partial-width” and “full-width” headers are no longer relevant, since you can position your logo and anything else in the header area with CSS.

      Look at the header on my site as an example, or any of the other sites I listed in the tutorial to see this in action.

      John

      • Hi again John,
        Thanks for the reply. I did the steps you outlined. But the image still looks blurry to me. It’s saved as a png, so I really have no idea what’s causing it. Anything you could share would be most appreciated. Thanks!

        Maricar

        • Hi Maricar,

          Nice job on getting the logo image in there. I don’t see anything in your CSS that might be causing blurriness, and to be honest, the logo really doesn’t look blurry to me. Are you viewing it on a Retina display by chance?

          John

  70. Hi John,

    I keep getting a parse error when I add the code to the end of the functions.php file (Parse error: syntax error, unexpected $end in /xxx/going-green-pro/functions.php on line 113) Line 113 is the last line of the code. I’m adding exactly the code that you have above. Very new at anything related to PHP — any idea what I’m doing wrong?

  73. John,
    I had a question. I followed your steps and built it in Firefox. It looks beautiful. However in Safari and Chrome, it looks completely different…Can you think why that would be?

    Thanks,

    Suzanne

  74. Used this to put a container width header logo in and it worked like a champ once I got all of the width’s set. This was on Genesis News Pro Theme.

    The site isn’t live yet but it’s looking good.

    • Hey Siobhán,

      You’re welcome!

      If you comment out or remove the following lines, your image should appear and be responsive:

      line 959, .site-title a, .site-title a:hover
      line 984, .header-image .site-description, .header-image .site-title a
      line 997, .header-image .site-title, .header-image .title-area

      John

  76. Thank you SO MUCH, John! I had two client sites with problems with the header not being responsive and hadn’t been able to find the right answers to help me understand how to fix it. Bam, done! Thanks again, Samantha

  77. Hi John,

    Thanks so much for this tutorial, I came across it while searching for a responsive header solution, as on an Ipad device my header image was getting cut off at 1048.

    Your solution worked to resolve that, my ony issue now is that there is a gap between the header image and my nav menu at that resolution. Any idea how I can fix this?

    Genesis 2.0.2 and the News Pro Theme

    http://www.bclionsden.ca

    Thanks!

    • Hey Brian,

      You’re welcome, glad you found it to be helpful.

      To correct that gap under the header image, in style.css I would remove all the rules from line 2112,

      .header-image .title-area, .header-image .site-title, .header-image .site-title a

      except

      padding: 0;

      John

      • Sorry John, I am a bit of a hack at this, can you indicate what I need to change? Is this the right area in CSS?

        /*
        Site Header
        —————————————————————————————————- */

        .site-header {
        background-color: #000;
        }

        .site-header .wrap {
        padding: 0px 0;
        padding: 0rem 0;
        }

        /* Title Area
        ——————————————— */

        .title-area {
        float: left;
        padding-left: 40px;
        padding-left: 4rem;
        width: 300px;
        }

        .site-title {
        font-weight: 700;
        font-size: 24px;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1;
        margin: 0;
        text-transform: uppercase;
        }

        .site-title a,
        .site-title a:hover {
        color: #000;
        }

        .site-description {
        color: #999;
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: 400;
        letter-spacing: 2px;
        letter-spacing: 0.2rem;
        line-height: 1;
        margin: 10px 0 0;
        margin: 1rem 0 0;
        text-transform: uppercase;
        }

        /* Full width header, no widgets */

        .header-full-width .title-area,
        .header-full-width .site-title {
        width: 100%;
        }

        .header-image .site-description,
        .header-image .site-title a {
        /* display: block;
        text-indent: -9999px; */

        • No problem. You must be using the WordPress built-in file editor so you don’t have line numbers?

          Anyhow, that’s where you would normally find it, but in your case the code I was referring to has been added to the very end of your style.css file, so you’ll need to look there for it.

        • Ok I found the area. Thanks…that fixed it at 1048, except the orange line across the top of the nav menu doesn’t show up on the front page, but does show up on other pages?

        • For that, remove everything from .site-title except line-height: 1;, and change that to line-height: 0;

          Then, add this rule below that

          .site-title a img {
          margin-bottom: 0;
          }

  78. It does puzzle me why Studio Press offers the option to use a logo in the header, but then drops the ball on getting the logo in place. So I am really grateful for people like you who offer help to the rest of us designers (not full time coders!).

    Anyway, I think I followed your instructions, using the Genesis Frameworks theme, but I still am not seeing my logo show up. http://192.185.150.46/~designsb/ If you can take a moment to help me out? Thanks so much!

    • Hi Jan,

      You can completely remove the following: .header-image .site-description, .header-image .site-title a { display: block; text-indent: -9999px; }, which should be at line 905 in your style.css.

      After that, you’re going to see two logos, since you have one set as the background image for .header-image .site-header .wrap at line 913, and you’ll need to remove that.

      Next, I don’t think you did step #6, Remove the site description, so you’ll want to do that too.

      And finally, you’ll have some CSS edits you’ll probably need to do to finish.

      John

  79. Hello – your tutorial almost has me there!

    http://69.195.124.70/~yourdeli/

    I think I covered all the steps… I may have missed something. But by commenting out the text-indent: -9999 it added a padding above the header – which I can live with.

    But the big thing is that on smaller screen sizes it still isn’t removing the excess padding between the banner and the navigation.

    For some reason the Executive-Pro theme does this, other themes it works perfectly. Any suggestions?

    Thanks!

    • Saw another comment above and fixed the above the banner padding… now to figure out the below padding!

    • Hi Marta,

      Check out this modified style.css, based on your current style.css file. I didn’t delete anything, just commented out what didn’t need to be there, and I added a couple blocks of code that you’ll be able to see.

      https://db.tt/7Ac2WAHI

      The fact is, StudioPress adds a lot of unnecessary CSS to make their logo method work, and with my method most of that code can be safely stripped out. Have a look and see what you think.

      I haven’t actually tested this – only copied over my edits from Firebug – so keep a copy of your original style.css.

      John

  80. Hi John,
    Your tutorial has been so helpful. I have used it on two websites I have created.

    Do you have a tutorial on changing the background image for different pages? I have followed a few online, and can’t seem to get them to work. Problems I experience are the image flashes up on the page and them goes to the original background image. Also, only even flashes when it is coded to repeat, which I don’t want. The website I am working on right now is http://memorabledj.pourlamur.com/ and it is Agency Pro theme. You will notice that I have placed my logo in following your instructions. 🙂

    Blessings to you,

    Suzanne Reid

    • Hi Suzanne,

      I haven’t done a tutorial on background images for different pages, that I can recall anyway. I think the issue with your site is that it’s using backstretch.js, which is overriding your different background images on certain pages. And that’s where that image flashing is coming from. Sort of.

      Backstretch.js is good stuff, and it’s packaged with many StudioPress themes anymore. I’m guessing that you’re trying to change background images with CSS, although I didn’t see that in your style.css. What you could do is set up some conditionals in your functions.php, and have backstretch.js load a different image for different pages. That’s probably what I would do anyway.

      John

      • I learn so much from you. Okay, I now know about the beauty of backstretch.js, which I never knew of before you! I am thinking I am in the deep weeds here. Where do I find code or a tutorial to change conditions in my functions.php? Yeah, I took out all of the css. I had followed 2 different online sites showing you how to change the background images, which wasn’t working, as you noted due to backstretch.js.

      • Hey John,
        Just did some more studying online. Found a plugin for someone like myself that is still in the beginning stages. Custom Background plugin allows me to easily change from page to page. AWESOME!

        Thank you so much for be willing to guide a newbie like myself.

        Blessings,

        Suzanne

  81. Hi John, this is fantastic, but I’m really struggling with my CSS. I have succeeded in getting my logo to display on the left, but I just can’t figure out how to get it centered it in the header area.

    I’m using the Executive theme, and need to get the exact same effect that you have achieved on http://whatthebiblesaysaboutthat.com

    I have used Firebug to try and analyse your CSS, but the nearest clue that I can get is this:

    .header-image #title-area {
    text-align: center;
    }

    I have tried to paste that into my CSS, but no luck. Do you have any thoughts?

    Thanks for the great tutorial.

    • Hi John, I just noted the comments above from Marta regarding the Executive theme and used your CSS modifications. I also made a new logo measuring 1140px wide with my logo in the center (and changed the corresponding value in your CSS. That almost works, but the logo shrinks and is almost unreadable when viewed at around iPhone display size. Is there any way of stopping it from becoming so small?

      • Hi John, it’s a development website that I am running on my mac using DesktopServer. I’ll try to upload it to a live server so that you can see it.

        • Hi John – I have managed to upload the site, and I think it’s working now. I’m not quite sure how I did it (largely due to your tutorial of course), but the logo area is now the size that I need it, centered in the header area, and stays at the same size when viewed at a narrower screen size. Does it look OK to you?
          Tim

          • Tim,

            Yeah, it’s looking good. There are a few things you could do to tighten up the header/logo CSS a bit, but you’ll probably find those as you continue to develop the site.

            Nice work!

            John

  82. Hi John,

    Firstly. What a FANTASTIC blog! SOO helpful. 🙂

    I was wondering if you had a tutorial on how you got the mouse hover over effect on the featured images on your executive them sites?

    woodland.bhwebworks.com

    parkviewefc.org

    Thanks!

    Clint

  83. Hi John,

    It looks like this article could solve my problem. I took over from helping someone with their website (basically the guy got a design company to do it over a year ago and now I’m finishing the job). I made the mistake of updating the Genesis framework and Education theme. There is a bit of code outside of the stylesheet that is now messing with the header and I can’t find where to remove it.

    The site in question is http://www.bailyfit.co.uk

    The header is supposed to be all beige but for some reason there is some code in the header now causing it to display with a green background URL. Using Firebug, when I hide this line of code from the top of the header:

    #header {
    background: url("http://www.bailyfit.co.uk/wp-content/themes/education/images/header.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    }

    the site displays correctly. The only problem is I am not sure where this line of code is being pulled from to remove it.

    Would following these steps solve my problem or are they unrelated?

    Thanks,
    David.

    • EDIT – I’ve followed the steps and it worked, thanks for that! I’m now stuck trying to get it to display correctly on mobile devices, commenting out your CSS suggestions in Firebug is making the site display incorrectly (commenting out text-indent: -9999px; gives me a ghost image). Getting there though. Any further suggestions would be greatly appreciated.

    • David,

      It looks like you’re loading your logo image twice – once using my method, and once in style.css as a background image for .header-image #title a, line 256.

      John

      • I’ve commented out the duplicate but still no logo showing on mobile devices. Your article helped to sort out displaying on desktop though so thanks for that.

        I compared mine to the css in your demo site but nothing leapt out. I’m sure there’s something that can be done in either the Header, Image Header – Partial Width, and Image Header – Full Width of my css to fix it, I’ll get there in the end!

        Cheers,
        David.

          • Thats’ perfect, many thanks John. Your article and personal advice has been a tremendous help and a cure of stress and headaches!

            Best regards,
            David.

  84. Thank you so much for this! I had to tweak my CSS a bit, but this was a much better fix than the fix the theme’s author gave me, which was a work around. Works flawlessly with Genesis 2.0.

    Thanks again!

    • Suzanne,

      If you remove or comment out lines 1004 and 1015, which are both .header-image .site-title a, your logo will appear and then you should be able to work it into place.

      John

  88. Hey John,
    I am so thankful for your post, and for the time and attention that you’ve given all your dedicated followers in the comments. I read them all, trying to avoid bothering you. I have followed the tutorial, but obviously made a mistake. I am very new to CSS. I’m using the eleven40 theme. My problem is the logo is now sticky, I’m not sure what happened? Also, I was hoping by hiding the site description, the tagline would also be hidden. Is that accomplished elsewhere?

    • Hi Ashleigh,

      That’s a lot of comments to read through!

      Regarding the site description, did you do step #6 in the tutorial? That should take care of removing the site description.

      And regarding the logo, header, etc., what is the final look you are trying to achieve? If you can describe that for me I should be able to help you with the CSS to arrive at that.

      John

      • Yes, I pasted that code at the bottom of the functions.php file. I’m not sure that the “Practical Information” that is currently showing up is covered in the site description, it’s called tagline in the Customize area. It is shown as being in the widget-wrap area on the Visual Hook Guide.

        Right now the look I am trying to achieve is having the logo aligned left in the header, leaving the right side of the header open for possible ad space. Then, no double line and no “Practical Information.” Just all white (above the nav bar) with the logo aligned left. And, for the logo to stay put. It is currently scrolling along with the page.

          • You could do it that way. Otherwise you can download it via an FTP client such as Filezilla, and just send the file as is.

            Out of curiosity, when you added code to functions.php did you use the WordPress built-in editor?

          • I just sent the edited functions.php to your email address.

            The reason the site description code from my tutorial wasn’t working is because the eleven40 theme functions.php had repositioned the site description using a different hook.

            Let me know when you’ve updated the functions.php on your site.

            Leaving the editor intact in the WordPress admin is a potential security risk should a hacker gain access to your WordPress admin. Also, if you edit a file incorrectly, especially a .php file, you could lock yourself out of your admin. Much better to use an FTP client and file editor combination such as Filezilla and Notepad++.

  89. Hi John.

    I appreciate your tutorial; however, I’m lost when it comes to a lot of this stuff. I’m using the Outreach theme and I’ve managed to complete the first two steps of your tutorial: I found my functions php and added what I was supposed to. I then went to my theme settings and clicked “logo.”

    I’m now on step 3 and I’ve downloaded FileZilla, but trying to figure out what to do with it or how to use it, my eyes have glazed over and I’m lost. I’ve tried logging in by the “quick connect” bar at the top of FileZilla using my WP site info, but it doesn’t seem to be working. Like I said, I’m completely lost.

    Can you offer any advice or help?

    Brad

    • Hi Brad,

      Setting up and using Filezilla is probably beyond the scope of a comment, but I can point you in the right direction. Since it looks like you’re hosted on Bluehost I’d recommend this article for general FTP information, and this article for using Filezilla specifically on Bluehost. Here’s a good tutorial from Filezilla.

      I can tell you that you’ll use your Bluehost cPanel login information for Filezilla, not your WordPress login.

      You’ll also want to look into a good text editor, and you can’t go wrong with Notepad++.

      There is a learning curve to all this stuff, but it’s doable, and even worth it in the end!
      John

      • Hi John,

        First off, thank you for taking the time to walk me through this. I’m a complete novice with this stuff and because of that, I’m still lost. I have spent the last 4 hours reading about this and working on it, but I still can’t log into FileZilla. When I follow the Bluehost tutorial, I try to log in under site manager and “login type: normal” but it won’t let me, because it says, “Saving of passwords has been disabled by you. ‘Normal’ and ‘Account’ logontypes are not available. Your entry has been changed to ‘Ask for password’. Then another box pops up and asks for my password, I enter it and nothing happens. Is there anything obvious and simple you can suggest I try?

        I appreciate you advice or help.

        Thanks!

        Brad

  90. When I added this (agency pro theme) it seems to have removed the site background image on the mobile version – logo looks great but the background image of the site has disappeared – any help would be great! Thanks!

  91. Hmmm. I’ve tried this on my son’s blog, and while your tutorial makes the header appear perfectly on the blog (and skips over an obscene amount of shenanigans I previously had to go through to get the header’s responsiveness right), I can’t seem to make it show up as a facebook thumbnail. The thing is, I’ve tried your own site on facebook as a test subject, as well as a few of the other sites you’ve mentioned having used this technique on, and I don’t see any of the sites’ logos as thumbnails either.

    I wonder if I’m doing something wrong, or if facebook’s recent (and ongoing) changes have managed to make life harder for everyone once again.

    • Hi Monica,

      Yeah, I’m pretty sure Facebook changed how it pulls in an image from a website after this post was written. I still think it’s worth using this logo method, but making it work with Facebook isn’t a primary motivation anymore.

      John

      • Thanks for the reply, John. Like I said, this method saved me trouble in other areas, I just didn’t want to miss out on the Facebook featured image if it was because of something I was doing wrong. 🙂

        Monica

  92. Hi John,

    I am using the Sixteen Nine child theme and followed your steps. My logo.png file is showing up great. But I can’t get rid of the original “avatar” logo. It is still showing up right above my logo. Did I miss something? Your CSS changes didn’t match up with what I’m seeing in the Sixteen Nine theme.

    -Doug

  93. Just awesome, man. +1 for the effort and another for a comprehensive explanation. Just what I needed. I was confused if I should stick with the default logo structure of Genesis or go with a logo.

  95. Hi John,
    I have followed your wonderful logo replacement option twice and really like the results. However, when I have coded these 2 websites for the phone I have had some problems with the menu extending out beyond the margin and I can’t find any code to solve it.

    The buildbimmerle.com works on the iphone in its horizontal format, but when you look at it on vertical, the whole site moves over. I have run a cool program that shows the rogue element and it seems to be something behind the menu.

    On my memorabledj.com, the site doesn’t shove over on the iphone, but the menu is not centered on the page. And in the rogue elements, it appears to be in the same section of the site. I can’t figure it it’s requiring more php code…?

    I would pay you to help me figure this out. I have been up two nights trying to solve these problems for the two sites.
    Best!
    Suzanne

  96. Thank you so much for posting this tutorial! I’ve always hand-coded custom themes for our company’s various sites, but with a new project I decided to try the Genesis Framework and the Epik Theme….I have no fear of modifying CSS or the functions.php, but trying to get our Logo in the header was really stumping me….this worked like a charm and I appreciate that you save me hours of work! You should have a “donate” button on your site. 🙂

  97. Hi,
    I have a quick question. My Genesis website is showing the default header right before the Genesis Hook for custom header is executed. I applied my custom code in the Unhook genesis_do_header() function. So why is it still showing two headers. You can check the problem at thenewipadblog(dot)net.

    Please help me out.

  99. Thank you again for all of your support to the wordpress community.

    I have really messed myself up with my coding.

    My logo when dropped in according to your steps needs to be moved up. I wrote some code for that, but now it messed up all of my images on the site. They all are out of place and come in too large. I have removed all of my css edits and the images are doing fine again.

    Below is the code I wrote, would you tell me how to change it so that it doesn’t affect the rest of the images on the site?

    a img {
    height: auto;
    margin-left: -10rem;
    margin-top: -13.2rem;
    width: 85%;
    }

    Thank you!

  100. Oops! I didn’t mean to send that. Ignore it. Sorry. I realized after things you’ve said to me in the past–less is more with code 🙂 My solution is to go back into illustrator and change the logo size so I don’t have to edit in css.

    Suzanne

    • Suzanne,

      Good catch. To answer your question though, and for future reference, using a img as your selector will select all images on the site that are also links. A better way to target your logo image is to use .site-title img

      John

  101. John, if I follow this info and put up my header using these instructions will it also be at the top of my blog page?

    I am trying to create a site that will have a blog page for the home page with a header at the top.

  102. Hi John,
    New challenge!:)

    Using the parallax pro theme:

    How do I keep the logo on the background when the site scrolls up? The logo wants to keep moving over the site along with its header. I like the black header. Just want the logo to move up with its b/g.

    Thank you!
    Suzanne

    • Actually, I looked at some of the other Parallax showcase sites. And it seems in this case, simply the logo in the content of the page is the better way to go. I have solved it that way.

      Thanks,
      Suzanne

      • Hi Suzanne,

        So you’ve got it figured out, more or less?

        I wonder if you could have a smaller version of the logo appear in the header when you scroll down past the full-size logo…

        I did notice that the logo is linking to itself, which probably isn’t what you’re wanting it to do. Other than that detail, that’s a nice one-pager you’ve got going there!

        John

        • Thank you very much! I appreciate all of the compliments in this yet so difficult wordpress world. I appreciate the comment regarding the linked logo. I will change that. I am going in to change the logo to make it stand out better.

          Have a Blessed Easter!

          Suzanne

  103. John,
    I’m having issues with my header. I think that I followed too many tutorials and get everything messed up now. I have the logo.png file set as transparent so the gradient background should show through, but there is a solid block behind my text. I would like it to be a responsive header with the logo. Also not quite sure how to get rid of the black line above the navigation buttons and change their color to match the red #d2232a that I have elsewhere. Any help would be appreciated. Thanks,
    Ted

    • Hi Ted,

      Use this to replace your style.css: https://db.tt/vljFyqZa, and this to replace your logo: https://db.tt/JkljN6fu

      I commented out a bunch of code you don’t need related to the header and menu, and I trimmed your logo to remove the excess. Your logo only needs to be as big as what’s visible in the image, especially if you want it to respond correctly.

      You should rename this new stylesheet to style.css or just copy the contents to your current style.css. Make a copy of your old one before you do that, though.

      And rename the image to logo.png.

      If you try this, let me know. There may be some things that still need to be tweaked.

      For future reference, your media queries should cascade from larger screen sizes to smaller screens sizes. Yours were sort of jumbled up at the end your stylesheet, and probably cancelling each other out at times.

      John

      • Wow! Awesome!!! THank you. Is there anyway to remove the border from the top and bottom of the content area and center the navigation menu?

        • Sure.

          .entry, .page.page-template-page_blog-php .entry {background: none;}

          will remove the border. (You were referring to the diagonal lines, right?)

          And .nav-primary {text-align: center;}

          will center your menu.

  104. I figured out the centering as you suggested, but still can’t get the main nav bar background to be #333 and upon hovering go to #d2232a

    • Ted,

      Try this for your menu:

      .genesis-nav-menu.menu-primary {
      background-color: #333;
      }

      .genesis-nav-menu .current-menu-item a,
      .genesis-nav-menu li a:hover,
      .genesis-nav-menu li:hover a,
      .genesis-nav-menu li.current-menu-parent a,
      .genesis-nav-menu > li.current-menu-ancestor a,
      .genesis-nav-menu ul li.current-menu-item > a {
      background-color: #d2232a;
      }

      John

      • John,
        I can’t seem to get that to work. It is still only showing up grey? Any thoughts? Also, is there a way to make the menu bar extend across the entire page like the footer bar but have the menu titles centered above the content?

        Thanks,
        Ted

        • Ted,

          That hover color code is being overwritten by line 1845 in your style.css. You can just edit that line with the proper color and it should work.

          For the extended menu bar, change the background color in line 1165, .nav-primary, to #333.

          Not trying to be rude here, but these additional CSS edits are getting pretty far off the topic of this blog post. I’d suggest trying the StudioPress forums at studiopress.com/forums if you need additional CSS help that isn’t related to replacing your logo image.

          John

          • John,
            Thank you! No offense taken. I appreciate all of the assistance you have provided and understand your concern.

  105. John,

    Serious noob here. I originally had my nice little logo added to my site by just replacing the gradient image URL included in the Mindstream theme with the URL of my logo. Problem was, it looked great on a desktop but wasn’t responsive at all (in fact, the content section wasn’t responsive either).

    So I’ve been searching for solutions to find a way to make the header image responsive and did your code edits exactly (even though Mindstream was not listed as one you’d worked with) but my logo doesn’t show up at all on the website now. Am I missing a step on how to add my logo to the actual website after it’s been uploaded via PHP to that images folder of my theme?

    Thanks for any help you can offer.

    -Dan

    • Hi Dan,

      Removing text-indent: -9999px; from line 226, .header-image #title-area, .header-image #title, .header-image #title a will make your logo appear. Then you’ll need to remove or adjust the properties that give the logo and/or title area a specified width.

      John

      • John,

        Thanks so much for the quick reply. Unbelievable the kind of support you’re providing all of us. I’ll be passing your website along to other friends getting involved.

        I was able to get my logo to appear — thank you for that. I believe I eliminated the width property like you suggested, but the logo is still not responsive. Do I need to go through and write individual media queries for each screen size? I’m not sure I even know what I just said or how to do that, but I thought I saw that somewhere.

        Thanks,

        Dan

        • You’re welcome, Dan. Try adding this to your style.css:

          #header .wrap {
          max-width: 960px;
          width: auto;

          Currently you’ve got .wrap set at 960px, which in the header is not allowing the logo to be responsive.

          John

          • Incredible. We have a responsive header logo. Now for the next hurdles…

            Thanks John.

            -Dan

  107. Hey there,

    Thanks so much for this tut.
    Is there any way I can use a media query to use mobilelogo.png in stead of logo.png on devices with a smaller screen?

    • Hi Daniel,

      Good question. I haven’t tried this, but looking at the code I’m thinking you might be able to add another variable after $child_inside, call it $mobile_child_inside for example, copy the code for $child_inside but change the image file name, add $mobile_child_inside to the str_replace function, and then use your media queries to call either one logo or the other.

      On the other hand, if your mobile logo is just a smaller version of your normal logo, you could just resize that logo using media queries and avoid loading two images.

      John

  109. hi John,

    Thank you for great tutorial, but i cant get it to work, i carefully follow your step but i cant get the logo showing up. after i read the some comment, i comment out this line:

    /*.site-title a,
    .site-title a:hover {
    color: #31b2ed;
    }

    .header-image .site-title > a {
    background-position: top !important;
    float: left;
    min-height: 80px;
    width: 100%;
    }*/

    and still logo wont show up. i put the logo.png on the themes image folder.

    Any advise?

  110. Hello John,
    Thanks for this tutorial. I hope you van help me because it doesn’t work for me. I have been able to let the custom logo disappear but I don’t seem to be able to show the new one. I could’t find the Genesis option ‘Headers’ so I went to step 2 and out commented the code you suggested. Now I cannot adjust the headers in the dashboard anymore and I still cannot find the option under Genesis – options. I have added a logo named ‘logo.png’ to my images folder and I have changed the code in the functions file just as you mentioned. Still my logo is not shown… Could you please help me out? thanks in advance!

      • Hoi John,
        Thanks for answering so quickly. Unfortunately I haven’t… I just put step 2 and 4 back as it was because the widget in which I had placed my opt-in form had disappeared! My logo is now behind the black circle in which the S is placed (it used to be the M of Modern Portfolio theme). I would like to get rid of the S and display my logo (but smaller) instead. But how?
        Yvette

        • Yvette,

          Switched back to a background image logo for the time being? 🙂

          To remove the black “S” from the header, you can comment out or remove line 505, #title a:before, and all of its declarations.

          Then to make your logo smaller, either resize it before uploading, or change the width of the title-area.

          John

  111. Hi John

    this just might be the most popular genesis post on the web!

    I have gone through each step and double checked them all but the full width image isn’t showing.
    http://192.185.5.138/~jaymt808/
    Thanks for your generous help

    • Hi Ray,

      You’re welcome!

      You’ll need to edit line 251, .header-image #title-area, .header-image #title, .header-image #title a, in your style.css file, and remove or comment out these two declarations:

      text-indent: -9999px; width: 25%;

      and add this to make the image responsive:

      max-width: 100%;

      But having said that, this method isn’t really intended for full-width images in the header. Rather, it works best when the logo is not full-width or incorporated into the header background image. That’s why I suggested in our emails that you should separate the logo from the background image, and that way, you can still have that text widget with the phone number in the upper right corner of the header.

      John

      • Thanks John, that did it.

        at this point i’m inclined to lose the header widget altogether as the phone number occurs in other places too.

        Thanks for your help and the tutorials

        • Ok I jumped the gun with that last reply. Having removed the header widget it’s plain that the original issue i posted in the SP forum is still present, the # header min-height: 100px is still over riding and creating increasing white space between the header and menu with smaller device sizes. Do you know how i overcome that?

          Thanks

        • Ray,

          To fix the header height you’re going to have to go through your style.css and make some changes.

          Line 251 again, remove the declaration height: 100px;

          Then, add a new line somewhere around line 251, like this:

          #header h1 { margin: 0; }

          After that, you’ll need to go through the style.css file and remove or comment out all instances of #header { min-height: [..]px; } in the various media queries, or anywhere else they occur in that file.

          (Tip: Firefox and firebug work wonders for finding and working with CSS)

          John

          • Thank you so much John – you should really put a donation button on your site

  112. Thanks for this snippet, John! This is the best solution yet. I’m having an issue though maybe you could help me with? My logo is showing up blurry. I’ve been trying to figure out the problem all afternoon, but I’m stumped.

    It’s especially obvious in that the word “Design” is the same font as the text below the logo. Any thoughts?

    Thanks again!

    • Hi Christina,

      Are you referring to the logo on your “Coming Soon” page? If so, that’s not CSS-related. I downloaded the logo to my computer and it appears the same there as it does in my browser. If you created that logo yourself you may want to revisit that file and see if you can improve on it there.

      Also, since you have a white background, I would save it as a .jpg instead of a .png to reduce the file size considerably, and adjust the code accordingly.

      Another thought: are you using a retina-device to view the website?

      John

      • Wow, you’re fast. 🙂 Thanks for the response! Yes sir, that is the page I’m referring to. And I, too, wondered if it was the image itself. (I didn’t design it, but I thought maybe when I scaled it down I messed it up.) I’m still stumped though, because the logo displays clearly locally.

        I uploaded a side-by-side if you’d like to take a peek. But I do see now that it’s not any CSS in the way, so I’ll keep Googling.

    • Ahh, I see what you mean in that comparison screenshot. What’s the original size of the logo? The one in Windows Photo Viewer looks smaller than the one on the website, so I’m guessing you scaled it *up* for the website?

      • I should have investigated a bit further…you already have that .jpg in your theme’s images folder, so why don’t you edit my code to use logo.jpg instead of logo.png, and see how that looks?

      • I tried the JPG, but had the same issue (I’m still debating the white background–that’s why I was using the PNG.) But you’re right, the image in the photo viewer is smaller. However, that is the exact image that I uploaded. I had scaled it down to 600px wide, and that’s what is supposedly displaying on site.

        But when I download the same image back from the FTP client, even locally, it displays larger and blurry. This is totally strange and obviously an issue way outside of the snippet you shared. 🙂

  114. Hi John,

    I just tried this for my site running the Going Green Pro theme, and it didn’t work. The logo image appeared, but the spacing was all wrong and it messed up the styling of the whole site.

    Does something need to be done differently if you’re using the Going Green Pro theme? Would you be kind enough to take a look at my site and see if I’m doing something wrong?

    This stuff is so complicated when you know nothing about HTML/CSS. On a side note, I don’t suppose you could recommend a Udemy course or something that can teach you this stuff?

    Looking forward to your reponse.

    Thanks,

    Connor

    • Hey Connor,

      Your comment wasn’t deleted – just hadn’t approved it yet. Everybody needs approval for their first comment on my site to help avoid the spam that makes it through Akismet’s filters. I’m also launching a client’s website this morning so it’s kind of busy around here. 🙂

      Anyhow, I just looked at your site but it looks like you’ve switched back to no logo?

      John

      • Hi John,

        Please accept my apologies!

        Yeah, I switched back to no logo because I was scared I wouldn’t be able to remember how to switch back to a text-based logo if I left it too long, and it looked awful. I didn’t want my site to end up like that!

        When I was editing the functions.php and CSS files, things looked a little different to your tutorial. Is it possible that the Going Green Pro theme is laid out slightly differently to other Studiopress themes?

        How much would I have to pay you to swap the text that’s there now for the logo that I’ve had designed? 🙂

        Thanks,

        Connor

        • Connor,

          No worries, and apology accepted!

          The coding in every StudioPress theme seems to be different. You can see a progression in their code from one theme to the next as they change the way they do things over time.

          I’ve been telling folks $100 for me to make the logo replacement happen on their sites. If that works for you, you can send me a message using my contact form and we’ll go from there.

          John

  115. Hi John,
    Your tutorial worked perfectly, Thanks! Strange thing though.. I forgot to go back into the Genesis settings and switch over Dynamic Text to Image logo.. My logo did show with it set to Dynamic Text.. but when I switched it over to Image Logo, the logo disappeared.. so it worked in Dynamic Text setting rather than Image Logo…. Strange.. Leave it alone or is there something else going on? Here is the site: http://preview.theposhbox.net/photo-basic/ Excuse the mess, I’ve just begun working on it.. Thanks for your help, Pamela

    • Hi Pamela,

      That is interesting, and it probably happens because it uses a different CSS class depending on that setting. If it were me, I’d select Image Logo and then make the necessary CSS edits to display the logo. The “culprit” is almost always that the title-area has a value of text-indent: -9999px;

      If you make that setting change, let me know and I can help you troubleshoot the CSS.

      John

      • So I placed it on Image Logo, then what I did was look at one of the samples you mentioned for the Executive Theme, which is what I’m using.. then it looked like everything was removed from that css and only the following remained (no commenting out, etc.) so I did the same, viola, it worked!

        .site-header {
        margin: 0 auto;
        width: 100%;
        }

        .title-area {
        float: left;
        overflow: hidden;
        margin: 10px 0 0;
        }

        • Nice work! Yeah, I try to remove all the excess CSS from the StudioPress themes when I’m using them, and much of what they do for the header/logo is excess if you’re using my method for the logo.

  117. After struggling for a couple hours to figure out why this simply wasn’t working out of the box, I found your post here, and similar to many of the other comments, it saved me serious further headache(s).

    Thank YOU!

  118. John,

    This tutorial is fantastic! One caveat though is I have Metro-Pro and can’t seem to get it all sorted. I followed everything you mentioned plus a few pointers in the comments and I’m still having a bit of issues on my site: Sweet Life Fitness.

    Do you know what it might be that is blocking the opportunity for the header logo to show up?

    Thanks again!
    Bob

    • Hi Bob,

      Glad you liked the tutorial and found it helpful. The culprit in your case is line 180 in your CSS, .header-image .site-description, .header-image .site-title a { text-indent: -9999px; }

      Remove or comment that out, and your logo will appear.

      John

      • John,

        You are amazing and this worked perfect. The next caveat that I can’t get my mind around is the red Metro-Pro outline that is showing up around my Logo. It doesn’t look like a padding issue, but not sure what form of CSS is calling for that red outline and how to remove it? Perhaps it’s not even in the style css?

        I have someone wanting to get Freshbooks – I’m sending them here to get it – why? Because you’ve been amazing helping everyone out and it’s the least I can do for your awesome responses.

        Thanks!
        Bob

        • You’re welcome, Bob. 🙂

          style.css, lIne 178, .site-title a, .site-title a:hover

          comment out or remove the declaration: background-color: #f96e5b;

          Yeah, FreshBooks is good stuff. I’ve never regretted going with them after all these years.

          John

  119. Thanks John,
    I just applied your code changes in the functions file for Streamline Pro child theme.

    Seems to work fine and is responsive with only minor changes to the css here, to comment out the height and width:

    .header-image .site-title a {
    float: left;
    /*min-height: 60px;*/
    width: 100%;*/
    }

    Thanks again for clear instructions that work!
    Celeste

  120. Hi again,
    I spoke to soon – it worked but then the logo disappeared.

    Have changed here as well and seems OK:

    .header-image .site-description,
    .header-image .site-title a {
    /*display: block;
    text-indent: -9999px;*/
    }

    • Hi Celeste,

      Glad you got it figured out. Not removing the text-indent: -9999px; declaration is probably the biggest thing that folks miss when doing this.

      John

  121. Hi,

    Am building a site based on the sample theme – should this work as it doesnt seem to replace my logo its still a background image? any ideas what im doing wrong? thanks!

    • Hi Bill,

      Yeah, it’ll work with the sample theme. In your case, it looks like you skipped steps 5 and 6 in the tutorial.

      For step 5, at a minimum you’ll want to remove the background from .header-image .site-title a, and the text-indent: -9999px; from .header-image .site-description, .header-image .site-title. That’s just a minimum though. There’s more you can safely remove and clean up your CSS.

      To remove your site tagline, which will appear after making the CSS changes above, refer to step 6 in the tutorial.

      John

  122. Hey Jon

    Would this work for the News Pro theme? Having issues over here with getting a custom logo to work. It’s soooo frustrating getting a custom logo to work a lot of their themes. Thanks

  123. Just about to pull my hair out. Using the standard parent theme. Spent about 2 hours trying to modify the parent and then the child sample theme (same theme really).

    I don’t understand why this is so complicated for such a simple, standard function?

    • Hey Joe,

      Is it the logo replacement that you’re having a tough time with? And I agree, StudioPress could have made this easier, but it is what it is.

      John

  124. Thank you so much for your detailed description how to change effectively the image. I spend hours of figuring out how to set up a header image instead of some words and do make it responsive. Now it works, but it occurs a problem after going through your great tutorial and implement everything:

    The header itself is now bigger (the height), thus the navigation isn’t aligned anymore and the text area with the site description is ok, but the two small lines above (the same as under the description) disappeared behind the (now bigger) header area. The logo-size is 320x60px.
    By the way, I am using the Eleven40-theme.

    Do you have any idea how to fix it? I would really appreciate your time and your effort!! You are doing a great job!

  126. Hi John,

    A big thank you to you. I’m a real newbie at creating WP sites and Genesis. I was able to follow your tutorial and post my logo. I got lost with a number of other tutorials.

    Just a note. I didn’t have to make any of the style.css changes in steps 5 & 6. Everything looked fine. I even looked in style.css and didn’t find the code. I’m using the Enterprise Pro theme, so maybe this code isn’t included. However, now my company name is no longer listed in the browser tab.

    wendy

    • Hi Wendy,

      If you’ll post the URL to your site I can take a look and see if I can tell what’s happening with your site title. Not having to make any CSS changes makes me wonder if something didn’t go quite right.

      John

      • Hi John,

        Thank you for your generous offer. However, my site is not posted. I’m still learning to build one with a CMS and my html is very rusty. BTW…the issue I mentioned only is when I’m on the Home page. I get the proper title when I’m on any other page. If I have any additional information or when I’m ready to post, I may take you up on your kind offer.

        In the mean time, I’m just so pleased that I was able to post my logo!

        Sincerely,
        wendy

  127. I am trying hard to make this work but I am such a novice at website design. I was following along fine until step 4. I just don’t understand exactly which parts of the code I need to leave the same and which parts need to be edited.

    • Hey Scott,

      No worries – breaking websites is part of the learning.

      Looks like you have a PHP error on your site. If you want to use my Contact form to send me your FTP info I can help you with that.

      John

      • ( John has responded in detail with help on my webpage through a series of emails.)

        I will be sending any webwork your way. That kind of support from someone who isn’t even paying speaks loudly for your commitment to customer service.

  128. Hi John,
    After following your directions I no longer have a header image option to upload the image in Appearance > Customize.

    How do I upload the logo now? It’s probably obvious but I dont’ know how to upload the logo to the header without using Appearance > Customize.

    I did ftp the logo to the images file. Thanks – Any help would be appreciated.

    • Hi Bonny,

      Uploading it via FTP to your theme’s images directory was the right way to do it. It could be that it’s hidden right now due to some CSS that needs to be changed. Let me know the URL to your site and I can take a look.

      John

  129. Hi Thanks so much for your solution. I have my “image” appearing, but I still have the background image appearing. This is the code I commented out on the childtheme (themes/outreach pro/lib/structure/header.php) but it didnt seem to work
    //* Push $args into theme support array
    /* add_theme_support( 'custom-header', array(
    'default-image' => sprintf( $args['header_image'], get_stylesheet_directory_uri() ),
    'header-text' => $args['no_header_text'] ? false : true,
    'default-text-color' => $args['textcolor'],
    'width' => $args['width'],
    'height' => $args['height'],
    'random-default' => false,
    'header-selector' => genesis_html5() ? '.site-header' : '#header',
    'wp-head-callback' => $args['header_callback'],
    'admin-head-callback' => $args['admin_header_callback'],
    ) ); */

    I am interested in your solution because without it, I have not found a way to get my logo to be responsive. I appreciate any help.
    Thanks!!!

    • Hi Yardena,

      That code you included in your comment is found in the Genesis parent theme, not the Outreach Pro child theme, so you may want to not comment that out.

      The background image in your header is being included with some custom CSS for .site-title a, as far as I can tell. Are you sure you removed or commented out the code in your Outreach Pro functions.php for the custom header?

      John

  130. I cannot get my site header to become responsive. The rest of the site is, but not the header. I know the header is too large, but I need to resolve this problem then I can try different header designs.

    I am using the Eleven40 theme on Genesis and have my header set to 100%. Yet the header shows full size (i.e. partially on small screens,) while the rest of the site is fine.

    Paul

    • Hi Paul,

      Your current header image or logo is a background image, and they can’t be made responsive. That’s why I came up with the process explained in this blog post. If you follow the steps in the blog post you should have a responsive logo/header image when you’re finished.

      John

  131. I have /images/cococbee-header-1140-200.jpg in the images folder of the mag-pro theme image folder

    And that 1140 image was being served.

    Now it is being reduced to a smaller image but I have not changed anything. I downloaded the file and it is indeed 1140×200 but rendering as such.

    1140×200 is specified in the snip and css

    • BGR,

      In your CSS you’ve got

      .header-full-width .title-area, .header-full-width .site-title { width: 70%; }

      and

      .title-area { width: 600px; }

      Looks like you have your CSS minified so I can’t tell you where to look for those, but if you remove those widths you’ll have a full-width, responsive logo / header image.

      You should probably also remove the float: left; in that .title-area rule.

      John

  132. Awesome tutorial, thank you so much for taking the time to put it together!

    I’ve got it working correctly, but was hoping if you could provide some guidance on how to have a unique header image appear on each page. I see someone else has asked the same question, but her solution won’t work for me.

    (Please excuse the garish colour scheme. There has been a lot of client input on this project.)

    http://jenniferbnd.cheridufresne.com/

    Any input you have would be greatly appreciated.

    • Hi Cheri,

      I can’t remember if I’ve ever tried this or not, but you could try adding some if-then statements inside that function to check for a page ID (or page template, etc.), and then run the appropriate code that would load the desired image for that page.

      John

  133. Hi John! This is just what I’ve been looking for. I think I’m hung up at step 4 though. The header isn’t showing on my computer’s browser. I made a smaller header image for mobile and added that to the css and it did work. Shows up on my iPhone great! But the full browser for computer’s header doesn’t show up after removing the functions.php custom header support. I used the code you mentioned for the bottom of functions.php and replaced the file name from logo.png to fullheader.jpg… I’m sure I’m missing something obvious. In step 4, does that code for the bottom of the functions.php put back the original header? I uploaded fullheader.jpg to the images folder of my child theme, but it’s not showing up on the computer’s browser. The css I’ve added to show the mobile version works great though. Any idea? Thanks!!!

    • Hey Brian,

      Remove text-indent: -9999px; from header-image .site-description, .header-image .site-title a somewhere around line 934 of your style.css and you should see your logo/header image.

      Then you could also remove your mobile logo, since that’s unnecessary with this approach.

      John

      • Thanks! So, I created an entirely different header for the mobile version (It’s taller rather than longer) I was hoping I could have that for mobile and the original header for the desktop version. For some reason I thought this tutorial was for “Different headers for different situations” because that’s what I’ve been investigating all day and ended up here. Hahah… I wanted the taller logo for mobile because the original one keeps creating this big white space below the header on mobile. Also it looks better. I tried a dynamic header plugin, but I found out it doesn’t work on the newer HTML 5 versions of these themes. Is this outside the scope of this? Thanks man 🙂

        • Gotcha. You can remove that extra space by removing min-height: 445px; from .header-image .site-title a at line 946 or so. Since my approach loads an actual image instead of a background image with CSS, you don’t need a min-height rule.

          I have used the code in this post to load two separate logo images for a client who insisted, gave each one a different class, and then used CSS to either hide or display each one depending on different criteria such as which page was being displayed or screen size.

          The downside of that is you are loading two images when you really only need one.

          And this is just my opinion, but from a usability perspective that tall logo you’re loading on a mobile device takes most of the screen space, which is overkill. Smaller the better when it comes to logos on mobile.

          John

          • Thanks so much… I agree… It’s hard to know what’s below the tall image. I made all the adjustments… Looks good! I’m going to ask you something stupid now… Should I have even done all these steps since this particular theme has it’s own “header” area under “customize?” Hahaha… I feel like I could have made a few css changes and been fine with what it came with? Would you recommend keeping it the way it is now or going back to letting the theme upload a new header in the future in the customize area? Thanks man!

          • Well, the reason I worked out this solution and wrote this post is because adding a logo image with the customizer has issues, and I believe it’s a sub par way of adding a logo to a website.

            You could have done that, but your image wouldn’t be responsive. So my recommendation is to do it this way.

  135. I like the links you published at the bottom of your post. I especially like how you have the sermons setup with the option to listen and download. May I ask how you did that? Is it a plugin?

    • Hi Jose,

      The sermons on my church and demo sites are handled with a plugin I wrote a few years ago. At this point it’s only available on the sites the I build, and I haven’t decided yet if I’m going to release it on the WordPress plugin repository.

      John

  136. Hi John
    Thanks, it works fine on “Enetrprise-Pro” and you may have a look here

    zukzg.chisana.ch

    But is not exactly what I want… Then the image acts now like the title – it is clickable and covers the title and it is not possible, to install an additional personalized logo.
    I tried a lot of things (I am not familiar with CSS and PHP) to get the following:
    On my site “testhampi.chisana.ch” you see the green Title “Testhampi” and the site-description.
    The background-color is white (Its theme-original).

    Now I need to replace the background-color with a background image. Hope you understand, what I mean.
    The background-image (Enterprise Pro 1140 x 352px) should only act as background.
    So I would be able to overlay that background withe the Title / site description or a personalized logo (clickable elements).
    I spent hours to solve that but now I have no idea.

    Would you be so kind and give me any advices, how to make that?

    Thank you and kind regards.

    Hanspeter (Sorry about mistakes – English is not my mothertongue)