Responsive Logo for Your Genesis Child Theme

If you’re using a responsive Genesis child theme, you’ve probably noticed that when you add a logo image to your header, it does not automatically become responsive. I’m going to show you how to fix that!

Disclaimer before we get started: When adding new images to your theme, I recommend uploading them via FTP into the images folder of your child theme. I also recommend editing your theme files using FTP and a text editor. That said, this tutorial is written so you don’t have to use FTP if you don’t know how. Be VERY careful when editing your child theme files! One typo and your whole site will go down. Seriously.

Step 1:

Navigate to Genesis > Theme Settings and look for the “Header” section. In that section, select the “image logo” option and save.

Note: If you do not see this section in your Genesis Theme Settings, your theme likely has a header upload option enabled. This does not allow your header image to be responsive, so we need to REMOVE this header upload option before proceeding with step 1.

To do this, navigate to Appearance > Editor > Theme Functions (functions.php). Find and REMOVE the following section of code (note that your width and height values might be different than those shown below):

Step 2:

If you haven’t already, go ahead and create your logos that will display on different screen sizes. Here’s a handy little template showing the most common screen widths.

Note that you do not need to have a different logo file for every single screen width. The smaller widths will inherit the logo size of the larger widths unless you specifically set a logo image for the smaller width. For example, let’s say you have a logo image that will fit fine on on a 480, 320, or 240 pixel-wide screen. In that case you would set the logo for 480. If you don’t set an alternate image for the 320 and 240 pixel widths, they will display the same as your 480 width.

Once you’ve created your images, upload them under Media > Add New. Once you’ve uploaded your images, click the “Edit” link next to each and copy/paste your file URLs where you can find them easily. The image below shows where you can find your file URL:

media-upload-file-url


http://thepixelista.com/wp-content/uploads/2013/09/logo.png

——–

logo-480
http://thepixelista.com/wp-content/uploads/2013/09/logo-480.png

——–


http://thepixelista.com/wp-content/uploads/2013/09/logo-320.png

——–

logo-240
http://thepixelista.com/wp-content/uploads/2013/09/logo-240.png

Step 3:

Next, we’re going to add our image logos to the CSS. Navigate to Appearance > Editor > Stylesheet (style.css).

Look for the following section of code. Note that “.header-image .site-title a” is the only part that needs to match. The lines between the opening bracket and the closing bracket might be different than mine. If you can’t find it in your CSS, ADD this entire section:

Replace the image URL with the corresponding image URL from your media uploader. Note that your width and height values will probably be different than mine, so adjust accordingly:

Refresh the page, and you should now see your image logo.

Next, a word on media queries. Whatever CSS is included in a media query will override your main CSS for that specific width. There are likely a few in your theme, that look something like this (usually found at the bottom of your style.css file. Your max-width values might be slightly different):

@media only screen and (max-width: 1024px) {
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 480px) {
@media only screen and (max-width: 320px) {
@media only screen and (max-width: 240px) {

Directly AFTER any of those lines, you can include the code from the snippet box above and change out the image URL and width and height values for that specific width. For example, this is what my code would look like in the 480 section:

Rinse and repeat. :) You can add and customize your CSS as needed to each media query section. You can preview what your theme looks like at the most common screen widths by plugging in your site URL into the StudioPress Responsive Previewer.

Additional Resources:
Post by: Jessica Barnard

Comments

  1. I am in the process of remaking my FrontPage web site using WordPress. So far, I just know enough about WordPress to be dangerous. I am at the steep portion of the learning curve.

    Today’s project is to figure out a way to make my image header responsive and get it to center in the header area. I have been unsuccessful at both.

    I tried your method but must have done something wrong. After removing the code in the functions. php, the header area was blank. None of the reduced size images displayed. I have returned to page to its original state.

    Any suggestions?

    • Hi Bob, I understand that this tutorial can be extremely confusing, especially for someone who is new with WordPress (let alone new to coding languages like CSS and PHP!).

      Unfortunately troubleshooting where you went wrong can be challenging, because doing any one of the steps incorrectly would hinder your final result (much like working on a multi-step math equation, which has never been my strong point, lol!)

      That being said, you may have better luck hiring a Genesis developer to assist you. Sadly I’m usually not available for hire of smaller projects of this nature, but you might have luck with a service like Genesis Tweaks: http://genesistweaks.com/

  2. Hi

    Great post, same issue as OP here. Had to put the functions.php code back. Im using Genesis 2 and an html5 theme but cannot get the image to be responsive.

    Any suggestions many thanks

  3. Thank you for your helpful tutorial. I’m not really versed in code or anything like that, but was able to follow your directions for a website I am working on to achieve the desired results with slight tweaks.

    Instead of: “.header-image .site-title a ” I needed to use “#header”.

    Also for the block of code where you used:
    .header-image .site-title a {
    background: url(http://thepixelista.com/wp-content/uploads/2013/09/logo.png) no-repeat;
    height: 89px;
    width: 463px;
    }
    I only ended up needing to tweak the existing code already part of my theme css by adding my file url and adjusting my dimensions. At least for my theme (outreach) the block of code contains a lot of other stuff.

    Either way thanks for the help!

    • Michelle, thank you for sharing! The CSS selectors for XHTML themes differ slightly from HTML5 themes. I’m sure anyone using a pre-HTML5 theme will find this extremely helpful. :)

  4. Hi
    I have a studiopress metro theme installed on my wordpress blog.
    I designed a logo for my header in photoshop.

    Will the Genesis Responsive Header make my photoshop logo responsive?
    Many thanks
    Steve

  5. Thank you SO much, can’t believe how quick and easy this was! Now on to accomplishing a mobile responsive menu…

  6. Thanks for writing this Jessica! I was up at 3:30am trying to fix this for a client site I was working on. I’m a perfectionist and didn’t want to go to bed until it was showing properly on all devices. Thanks for being my saving grace when I was clearly not able to think straight. With the new HTML5 theme I was using all I had to do was add the images + media queries and it worked like a charm!

    • So glad to hear it! :) I know how the late night client projects go. I tell myself when I get so tired that I’m breaking more things than I’m fixing, it’s time to go to bed.

  7. OMG, I googled my problem and you were the second listing–I said HEY! I met her at BlissDom! I have pictures of her playing with my baby! ::waves hi::
    Thanks for this–lifesaver! The last Genesis update crashed my design, and I have to fix it myself, because there is no money. Hope you’re doing well, sweet lady!

  8. Hi Jessica,

    Your instructions worked for me, but I just have one little problem I wondered if you could help me with (I’ve been working at it for the past hour and can’t seem to get any breakthroughs!).

    My 480px header centralizes fine on full screens (1024px) and also seems to work on the 768px but any smaller than that and it screws up! It’s leaning towards the left and I cannot for the life of me find out why!

    If you’re able to help, thank you in advance! This post helped me out a lot! :)

    • I’m seeing that same thing on smaller screens – left justified. Have you found a solution to it?

      • Hi Trish,

        I wonderd if you solved the problem with the alignement of the smaller screen logo’s. I found my logo aligning on the right side of te smaller screens..

        Hope to hear from you!

        Josephine

  9. Hi,

    I think I am having the same problem as mentioned above. particularly, on the smallest size, there is a ton of padding on top and bottom of the banner. It looks terrible on the iphone. Help is appreciated.

  10. Thanks SO much for this! Would this same (or similar) thing work for the new Beautiful Pro theme? Right now the photo you put in the banner header area shrinks with the width but I want the same photo (or a similar one that may be a little more minimal + squished lol) to be on the mobile sizes as well. Responsive design is giving me a headache! So many tutorials but a lot are confusing as well! This isn’t, I used it for a friends site, she was using lifestyle pro! :) Thanks so much!

  11. Thank you for this! I kept finding complicated tutorials and I knew there had to be an easy way!

  12. You say to, “Find and REMOVE the following section of code…” Do we remove what you have in red text or ALL of the text in the box? I don’t know thing one about code and I’m scared to death to do something that will make me lose everything I’ve done thus far. Thank you!

  13. Hi–I’m using the Beautiful Pro theme and it resizes the header very nicely already, but it doesn’t resize what it calls the “custom background” (the image underneath the header). Can you tell me how to tweak your instructions to apply to the custom background instead? Thank you!

  14. Thanks for the code! I just have one problem, when I resize the screen or use my mobile, I get two logos showing up, the smaller size and the original larger size. Any suggestions on why I’m getting it twice and how to stop it? Thanks so much for the help!

  15. hi, i create a new plugin for genesis theme for upload with that you can upload logo from backend.
    http://buykodo.com/product/upload-genesis-logo/

    hopefully you will like this :)

  16. Thanks Jessica for such a helpful tutorial.

    I have just updated one of my posts (about responsive testing) so that it shows the before and after results of implementing your steps to make the logo responsive. Like some of the people who have left comments, I had to make a few tweaks to the code but that is to be expected because every theme is somewhat different. However, I found that your steps cover these differences very well.
    Thanks for a great step-by-step tutorial!!!

  17. T H A N K Y O U ! ! !
    S O M U C H ! ! !

    I have been jacking around with this ‘responsive header’ for days.

  18. Hi,

    I am using this theme and would like to continue using text as the header logo, but I want a custom background image in the header instead of a solid color. How would I go about doing this while keeping the site responsive?

  19. One way to do this, if the code here is a bit overwhelming, is to use the Genesis Club Lite plugin – it does responsive logos and a few other useful Genesis things. http://wordpress.org/plugins/genesis-club-lite/

    • In hopes of being able to center my header, I installed and activated this plugin, but I don’t see anywhere in the menu how it helps me center my header. Can you please tell me what I’m overlooking?

      Thank you!

      • Hi Wendi

        The plugin allows you to upload a LOGO – not a header – they are different things. As you say you have a header – I imagine you have more than just a logo – something much bigger? In which case, get your header image, make sure it is exactly the same size as the header specified for your theme and upload it using the built in header uploaded in WordPress.

        • Thank you for your reply. I did that and that’s what caused my header to be off-center and now I can’t find anything that will center it again. The first few times I changed my header it always showed up centered and now it’s not and I don’t have a clue what I did differently. But thank you for your time. :-)

  20. I had no luck with this method on Innov8te. Is there any advice to get this working on this theme? Any help is greatly appreciated!

    • Thank your for quick response! I’m not having an issue with coding the changes, but when I tried you steps above, it didn’t work for me. One key thing is this theme (innov8te) doesn’t have the header code your are referencing above (.header-image .site-title a ) in a solo area. It’s combined with other css and in both a Partial Width and Full Width areas. I’m not sure if I place the header code you recommend in both areas, or one. Can you advise?

  21. Here is your code implemented as best I can. I have a double image on the main header and it stays there when the responsive sizes are appearing.
    http://westseattlewordpress.com/bryanredux/

    http://westseattlewordpress.com/bryanredux/wp-content/themes/innov8tive/style.css?ver=2.0.0

    • Hi Cami
      did you manage to sort this out? I’m using the same theme and having the same issue about where to place the code.

  22. Hi Jessica,
    Thanks, this information is wonderful. My only problem is that my theme (News Pro) only has the following media query sizes in the css:

    1188px
    1023px
    600px

    I would like to have the full range of sizes that you have detailed, but I don’t know how to add them to my css. Do you know of any resources or tutorials that would help me to achieve this?

    Thanks again,
    Tim

    • Hi Tim,

      You can very easily add new media queries to your theme. Just copy and paste this line of code, and be sure to include a closing bracket at the bottom of the section (be sure to keep a backup of your original style.css file just in case!):

      @media only screen and (max-width: 240px) {

      [CSS that applies to 240px screens and smaller here]

      }

  23. Great post, I didn’t know the trick with the genesis-custom-header theme support. It solved my problem with the site of a customer of mine. Thanks.

  24. Hi Jessica
    I spent some time working out how to adapt the header on the Innovative/Innov8tive theme so that it can be customised, full width, responsive and link back to the homepage.

    I used your very helpful tutorial to get as far as it would take me then some other tips from elsewhere and have finally managed to get it working pretty much as I wanted. It looks like lots of other people are struggling with similar issues on genesis child themes so I’ve posted the method I used in the hopes it will be useful:

    http://www.betterworkingathome.co.uk/responsive-headers-genesis-innovative-theme

    I’m no techie, so no guarantees it will work for all, but it did it for me :-)

  25. Hey! I just wanted to Thank you SO MUCH for this tutorial. I read it when I first joined WordPress and couldn’t figure out how to do it but I revisited it about a month later and was able to follow it easily! THANK YOU SO MUCH!!!!!!!!!!! :)

  26. Fantastic tutorial Jessica. I set up the small header as instructed in the lifestyle pro tutorial but would much rather us different sizes depending on the visitor screen size. I find most of my traffic is mobile and when using a nice big logo it gets resized and is not very easy to read. This is exactly what I am looking for today!

  27. Thanks so much for this, Jessica! It seemed to take a lot of code to get the Generate child theme working the way I wanted (since the height and width affect several elements, not just the header region). Your tutorial was invaluable!

  28. Jeff Guynn says:

    Jessica: Thanks for this tutorial. I’m struggling with how to center the logo image in the header at some of the narrower screen widths when other previously visible elements (like “search field”) disappear. Can you point me in the right direction with this? Thanks.

  29. Hi,

    Thanks a lot for this tutorial! I just came across your site and I’m sure I’ll spend a lot of time reading your posts!
    I have one question about the media queries for this topic. I’m new to this, and, I’m wondering, how do you know what size to use in each media ? How do you decrease the original size? Is there a tool that help. A rule to apply?

    Kind regards

    Chrys

  30. Hi Jessica! Thanks for this easy to use demo. I did exactly as shown but my new logo is only showing up in Firefox. I get the default Genesis logo in Safari and iphone. Any idea why this is?

    • Hi Tyler, it sounds like your theme might have an alternate logo file specified for retina screens. Look for code that looks similar to this:

      @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (-moz-min-device-pixel-ratio: 1.5),
      only screen and (-o-min-device-pixel-ratio: 3/2),
      only screen and (min-device-pixel-ratio: 1.5) {

      .header-image .site-header .wrap {
      background: url([email protected]) no-repeat center;
      background-size: 320px 68px;
      }

      Hope that helps!

  31. Thanks! I was having trouble with my logo, because the framework css had .site-header instead of .title-area for the logo. This tutorial fixed it for me!

  32. Hey Jessica,

    I’ve done everything above — actually did it on another site previously and it worked out — but my Site Title still shows up. Why do you think it’s showing? Should I just remove the Site Title in Settings > General and call it a day?

    http://iamdavidgray.com/dev/fra/

    Thanks!

    -David G.

  33. Hi Jessica,

    Before I dive into this can you explain if it is designed to do anything different from what the Genesis Responsive Header plugin does? I’d hate to spend hours on it only to find out that I should have been using a different solution.

    Thank you!

    • Heads up, the Genesis Responsive Header plugin doesn’t word with HTML5 enabled sites, so if you’re using a child theme and have activated HTML5 (or if you’re using any of the “Pro” Genesis Framework themes), the Genesis Responsive Header plugin won’t work.

      Otherwise, this does the same job.

  34. Hello Jessica,

    Thanks for this great tutorial. However, my blog title appears on top of the header image…
    What do you think may be the problem ?
    Is there any hook I should add to prevent it from appearing ?
    Or is it in css ?

  35. Hi Jessica! I’m trying this on a demo site and just want the smaller sizes to be customized. I’m wondering what I’ve done wrong. I followed this tutorial, but the smaller sizes (240 and 480) don’t change. ?? I’m using the Beautiful Pro theme from StudioPress.
    http://demo.sandyfeetmedia.com/shelby

  36. Jessica, thanks for the tips. I know everyone including myself appreciates the help with their Genesis child theme.

  37. Sherry Haney says:

    Thank you!!! That worked perfect. Saved me loads of time and made client happy.

  38. Hi Jessica,

    Thank you for this post but It doesn’t work with my theme. I did exactly what you say. Do you know why?
    Here is my website: http://www.1globe2reves.com

    Thank you

  39. You just stopped my headache! I was doing outreach pro with an annoying header the client wanted and it all works now.

  40. Thanks so much for this post… much appreciated…

    I’ve been trying to fix the mobile responsiveness for this client site using
    genesis child theme since about forever: http://www.newhomenegotiators.com/

    I’ve tried all-of-the-above and it still wont resize on my iphone mobile browser;
    seems like the logo is hanging over; any suggestions on what i could try?

    perhaps i’m doing the media queries wrong?

    Thanks!!!!

  41. I tried this and then removed it, and put things back.

    But now, ON (desktop) CHROME, my header is doubled and overlapping. I don’t understand why because I’ve already removed the background url code. It’s neither on site-title or header.

    ON FIREFOX, my header looks just fine. Also, on my android phone, it’s fine too!

    Is there a hidden code somewhere? Because when I “inspect the element” on CHROME, I see this:

    .header-image .site-title a {
    background: url(http://www.gatheringgraces.com/wp-content/uploads/2015/03/gg-header-1140×342-faces.jpg) no-repeat;

    BUT on my “Editor” stylesheet in wordpress, this line is NOT THERE! So where is it coming from?

    Please, please take a peek at my site and tell me what is wrong!

  42. You are my official hero for the day. Thank you SO MUCH for this! I’m my own webmaster (mistress?) but I don’t want my site to LOOK like I’m doing it on my own. You totally saved the day for me. Thanks!!

  43. Hi, my wife is trying to rebuild our websites using Lifestyle Pro on the Genesis framework. She tried following your excellent tutorial, but the logo did not scale properly on portrait format on a moblie device. She believes that this theme adjusts by percentages rather than by size of image. If that is so, is there any way to make the logo scale properly? Thanks for any help you can give.

  44. Can I pay you to do this for me? :p No, but seriously. I can’t make this compute in my brain!

  45. Worked fined for me. Most of the mistakes that were made were “user-errors”. Good tutorial.

  46. Hey Jessica:

    Not sure if you monitor this thread anymore. Rather than remove the “Add Support for Customs Header” function in functions.php, I simply adjusted the h and w, but this leaves the image non-responsive.

    If I understanding your article correctly (sorry, I am Thai :) ), You are saying to removing this functions code altogether and focus only on the CSS?

    • Hi Yok, you are correct – my preferred method (the method outlined in this tutorial) is to remove the functions code entirely, because I feel the CSS grants greater control of your logo/header image. I hope that helps!

Speak Your Mind

*