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

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. says

    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.

  2. says

    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

  3. says

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

    • says

      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

  4. Frank Grimes says

    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.

    • says

      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

      • Frank Grimes says

        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.

  5. says

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

  6. says

    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/

  7. says

    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…

    • says

      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…

      • says

        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?

    • says

      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

  8. says

    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.

    • says

      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

  9. says

    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

    • says

      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

      • says

        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

        • says

          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

        • says

          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

          • says

            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

      • says

        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!

        • says

          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

          • Austin says

            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!

          • Austin says

            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!

          • says

            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.”

  10. says

    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.

    • says

      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

  11. Robin says

    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.

  12. Robin says

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

    • says

      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

  13. Tom says

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

    Thanks!

  14. Marc says

    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!

    • says

      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

  15. Haddon Kime says

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

  16. says

    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!

    • says

      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

  17. says

    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!

    • says

      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

      • says

        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.

        • says

          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

    • says

      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

      • says

        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?

        • says

          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

  18. says

    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

    • says

      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

  19. Sam says

    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

  20. says

    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!

    • says

      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

  21. says

    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

    • says

      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

  22. says

    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!

    • says

      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

      • says

        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!

        • says

          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

  23. Jordan says

    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)

    • says

      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

      • Jordan says

        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!

    • says

      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

      • Jordan says

        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;
        }

        • says

          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…

        • says

          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.

          • Jordan says

            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…

  24. says

    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 :-)

    • says

      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

      • says

        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

  25. says

    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!

  26. says

    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.

    • says

      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

  27. says

    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.

  28. says

    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.

    • says

      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

  29. Mike C says

    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

  30. says

    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.

    • says

      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

  31. says

    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.

    • says

      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.

      • john says

        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

  32. says

    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!

    • says

      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

  33. says

    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

    • says

      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

      • says

        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

        • says

          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

  34. says

    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.

    • says

      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

      • says

        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.

        • says

          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

          • says

            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!

          • says

            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

          • says

            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.

          • says

            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

          • says

            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!

  35. Jake says

    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?

    • says

      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

  36. says

    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

  37. says

    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.

    • says

      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… :)

      • says

        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.

  38. says

    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.

    • says

      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

      • says

        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!

        • says

          :)

          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.

          • says

            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.

          • says

            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!

  39. says

    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

    • says

      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

  40. says

    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.

  41. says

    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

  42. says

    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!

  43. says

    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

    • says

      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

  44. says

    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

    • says

      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

  45. says

    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

    • says

      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

    • julia says

      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

      • says

        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

        • julia says

          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…

          • says

            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

  46. says

    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?

  47. says

    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

    • says

      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

  48. says

    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 http://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

    • says

      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="http://cdn5.blackhillswebworks.com/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

  49. says

    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

    • says

      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

      • says

        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 http://blackhillswebworks.com/?p=4144

        What to do?

        • says

          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?

          • says

            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…

  50. says

    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

    • says

      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.

      • says

        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

        • says

          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

          • says

            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??

          • says

            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

  51. says

    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?

  52. says

    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!

    • says

      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

      • says

        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

  53. Nicole says

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

  54. says

    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.

    • says

      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…)

  55. Helen says

    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?

    • says

      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

  56. Zakk Leifeste says

    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!

  57. Sarah says

    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

  58. says

    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.

    • says

      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

      • says

        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!

        • says

          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.

          • says

            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.

          • says

            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

  59. says

    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

    • says

      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

      • says

        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

        • says

          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

  60. says

    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?

  61. Suzanne Reid says

    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

  62. Dave says

    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.

    • says

      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

  63. says

    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

  64. says

    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!

    • says

      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

      • says

        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; */

        • says

          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.

        • says

          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?

        • says

          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;
          }

  65. says

    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!

    • says

      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

  66. Marta Goertzen says

    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!

    • Marta Goertzen says

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

    • says

      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

  67. says

    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

    • says

      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

      • says

        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.

      • says

        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

  68. says

    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.

    • says

      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?

      • says

        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.

        • says

          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

          • says

            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

  69. Clint Villa says

    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

  70. David says

    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.

    • David says

      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.

    • says

      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

      • David says

        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.

          • David says

            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.

  71. Sally Hill says

    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!

    • says

      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

  72. says

    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?

    • says

      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

      • says

        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.

          • says

            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?

          • says

            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++.

  73. says

    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

    • says

      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

      • says

        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

  74. says

    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!

  75. says

    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.

    • says

      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

      • says

        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

  76. says

    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

  77. kenneth says

    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.

  78. says

    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

  79. Trisha says

    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. :-)

  80. says

    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.

  81. says

    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!

  82. says

    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

    • says

      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

  83. Wayne says

    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.

  84. says

    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

    • Suzanne Reid says

      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

      • says

        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

        • Suzanne Reid says

          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

  85. says

    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

    • says

      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

      • says

        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?

        • says

          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.

  86. says

    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

    • says

      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

      • says

        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

        • says

          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

          • says

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

  87. says

    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

    • says

      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

      • Dan says

        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

        • says

          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

          • Dan says

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

            Thanks John.

            -Dan

  88. says

    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?

    • says

      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

  89. Andy says

    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?

  90. says

    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!

      • says

        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

        • says

          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

  91. Ray Baskerville says

    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

    • says

      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

      • Ray Baskerville says

        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

        • Ray Baskerville says

          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

        • says

          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

          • Ray Baskerville says

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

  92. says

    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!

    • says

      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

      • says

        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.

    • says

      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?

      • says

        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?

      • says

        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. :)