Designs By Nick the Geek

Genesis Based WordPress Development and Tutorials for Everyone

Genesis Responsive Header Updated

OK, a huge thanks to the people who have already tried out the Genesis Responsive Header plugin. I got a lot of good feedback in the first week and have a new version ready for download. Please note, this is still a beta. It’s only been in the public for a week now. I believe this version is very stable though. With feedback you all can help me to make sure it works perfectly on any Genesis site.

What I Fixed

There was one major bug. The media uploader didn’t work right on posts/pages when the plugin was active. Short version is that the scripts were getting loaded when they weren’t needed. I’m not sure why this didn’t show up in my initial testing. It seemed to show up on several sites all at once a few days after it was initially released. I’m going to file that under weird.In any case, this is fixed now.

I also fixed an issue with how this worked related to some CSS where there was a logo set as the background for #title or #title a. This fixes the Education 2.0 compatibility to be specific, but will also address other themes using similar CSS.

I found that when uploading a logo for the first time it could overflow the metabox and looked unprofessional, so I fixed that.

I also found that when you changed the logo it didn’t reflect the new logo in the preview. That caused me a lot of heartache when I was fixing the first issue. I mean a LOT of heartache. I thought it wasn’t loading my scripts right after I limited it to just the scripts page because I thought it wasn’t actually changing the logo. Sometimes the simple things get overlooked.

I found a few sites didn’t get along well with the getimagesize() function because of the way the image was called via the URL. This resulted in some errors and ultimately I decided to skip that function and use the image size that is set when inserting the image via the WordPress uploader. This worked great and it means the code will be more efficient and less prone to error.

How to update

Since this is in beta I’m not quite ready to get it into the WordPress repo. This means you will not get a notification that the plugin can be updated in the WordPress dashboard. You will need to download the update here then disable and delete the plugin from your WordPress plugins page. Then you will be able to upload and activate the plugin from the new download. It should show that you have version 0.2.1 after updating.

Once again, thank you for helping test this during the early stages of the plugin development. I do expect this to be very stable but let me know if something isn’t working. With the previous release I did some behind the scenes work with a couple of users who were having trouble so we got some hidden updates in the outset. I’m happy to do the same if anything comes up. Please post any issues you have in the comments here or use my contact form or Twitter to let me know. Also, please share links to your site with the logo looking great on any device.

Related Posts

Comments

    • Bob,

      Yeah I probably should update that. It is on my list if final changes before submitting to the WordPress repo. The read me is used by the repo for building the information shown and to trigger updates. I’m just being a lazy coder because I don’t feel like going in and changing it during the beta, but I should at least clear it out to prep for the final version 🙂

  3. Nick, I just loaded both your Simple Breadcrumbs (SB) and Responsive Header (RH) plugins, however there seems to be a conflict with the SB plugin as the SB and RH items appear twice in the Genesis menu and RH images could not be selected. On de activating the SB plugin, the RH plugin works great. I can send a screenshot of the doubled up plugins if you need it.

  4. Nick,

    Would love to use this on a client site but have a strict “no betas” policy. What kind of timeline do you think you are looking at before you are ready to submit to WordPress repo? Are you talking days, weeks, or more than a couple of months?

    Thanks so much!

    • Selena,

      It really depends on if I get any major reports this week. If things continue smoothly I’ll probably bump it to version 1.0 and get it in the repo next week.

  6. This is a life-saver! Thanks for creating this plugin. I’m using it on a client’s site (using Adorable theme) and it works perfectly.

    When do you think you can add support for iPhone5?

  7. Nick,

    I’m going to try out your plugin next week —and you and I have talked about this issue before— but I wanted to ask you about headers vs. logos.

    I am using the Streamline child theme and am presently using a header that includes my logo. I can then load something into the Header Right widget (yadda, yadda). This is not mobile responsive at all, which is why I am hopeful for your plugin.

    Anyway, my question is this: When I load images into your plugin, are these only logos or are they headers? If logos, then what happens to the header when the website is loaded in a mobile browser? Should I have a separate logo and header on my website?

    With thanks in advance,
    Ian

  8. Nick,
    Just what I needed, nearly… I’ve applied what seem to be sensible mods to admin, output and resize-header to accommodate 1140, but I’m having difficulty with the header when the window size goes over 1140px or so. It vanishes. I’ve tried this with eleven40 and Minimum.
    I get a 404 on line 25 of resize-header.js, looking for a file called ‘none’…
    It’s probably an interaction with the way I’ve configured WP or Genesis, but I can’t see it.
    I also hit the problem with the SB plugin and RH + SB appearing twice.
    Happy to help in whatever way I can.

  9. Hi Nick,
    Your plugin is working fantastic with Streamline 2.0, as you know.
    Site URL: http://autospace.co

    Is this possible do use CSS for background and logo as image in 960px + for header?
    I’m asking it because your plugin does similar for width.

    Thanks Nick for this awesome plugin. 🙂

  10. Hi Nick,
    Working awesome with Streamline 2.0, as you know.
    Site URL: http://autospace.co/
    I was wondering how can I use CSS of background color and logo over it in 960px +,
    this will be optimized way instead of using whole image header.
    I’ve asked this because you’ve done this your plugin for other devices.

    Thanks for this awesome plugin.

  11. Hi Nick, plugin works well thank you with genisis/agency…I have the same issue as Aditya with an error trying to load …/none – otherwise works like a beauty.

  12. Just downloaded this, reading the instructions that come with it you do know it refers to the Genesis Simple Comments plug in don’t you?

  13. Nick,

    I installed the Responsive Header Plugin and loaded the images however, the only page on the site that is responsive is the Home page. Am I doing something wrong? I tested the pages on a Samasung Galaxy S2 and an Ipad 3. Thank you for your help!

  14. Hi Nick,

    Great plugin, thank you! For some reason our logo keeps hiding behind the menu on our site when viewed on a mobile device. Any thoughts? Thanks again!

    JH

  17. NICK! I’ve used this on 2 [soon to be 3] sites and it’s been great. It’s on my site = babalucas.com, which you suggested a few weeks ago. Whatever beta testing you need, please keep me on your list.

  18. Hi Nick:

    Thanks for letting me know about your new plugin. I just installed the updated version on a new site today and it worked perfectly first time. Right off the bat one thing I really like about this plugin is that because we load up separate images to be used depending on the device accessing the site, we can not merely resize the two smaller logos/headers but actually redesign them to be more legible. Awesome plugin!

    Thanks,
    Rudy in Ottawa

  20. I installed this in the News Child Theme for Genesis and the logos do not appear. there is just a blank space where it “should” be. Unless I am doing this wrong, which there is that chance 🙂

    • for now the latest version will be updated on site. I have one last version I am going to release and have tested before putting it in the repo.

  22. Don’t know what the current status of this is, but if it’s still being worked on, it will be a lifesaver for me. One issue I did have though is that several of the themes I use have a default for an 1140 wide header, and while it resizes 768/480/320 beautiful, it doesn’t work on 1024.

  23. Nick: I just activated the Responsive Header Plug-in on ,my web-site under development. The site uses Agency Theme from Studio Press and is located at URL: http://www.rexboatingclub.com/blog/
    I have two issues. First when uploading the images I get all the dialog boxes concerning placement and size of the logo, plus a box that says background color=#000000. When I click save, there is no indication my work stuck. The images are loaded in the media folder, but that’s about it. Second, when I try to check my resizing of the page I get the black background color showing for the smaller sizes, but no images of my logo. Also how can I load a logo for the full sized logo (960px wide)? Do I just do a media query for it? Thanks. Mike

    • Mike,

      right now I don’t have a solution for the “full sized” logo it would have to be done via CSS. If things are not saving it might be another plugin conflicting.

  24. Hey Nick!

    Your plugin is the perfect solution for my project! I’m not very CSS savvy and the thought of adding separate media queries to the style sheet to make a header responsive was a bit daunting. My client would really like the logo in the header to be responsive.

    I’m using the Education child theme on the Genesis framework. I’ve been tinkering with your plug-in and I’m wondering if you have any advice. The smallest images (240 & 320) don’t seem to be rendering well when I re-size my browser window – http://ccomdev.com/belay/. I’m not sure if it’s because I’m using a background image in the CSS file instead of adding the header image in Appearance -> Header like this:

    .header-image #title a {
    background: url(http://ccomdev.com/belay/wp-content/uploads/2013/02/header_v2.jpg) no-repeat center left;
    }

    I’ve made all the other logos the exact width (768, 480, 320, 240) and tried swapping out GIF’s, PNG’s and JPEG’s with no luck. Would you happen to know if using CSS for the main background image would somehow be interfering with your plugin?

    It responds well on an tablet sized view port, but when we get down to small screens it seems like it’s grabbing the wrong image I’ve set.

    I’d appreciate any advice you can offer!

    Mike Kissel

  25. Nick,

    Great plugin in, thank you! Saved the day for me. I’m using it with the Education theme on this site:

    http://www.habitat-for-humanity.org/

    I’ve tested on my iPhone 5, iPad3 and my iMac using the mobile responsive test site provided by StudioPress. Here is what I’ve found:

    Viewing on my iMac and resizing the browser window, the logo goes away in the size around the 480 width.

    It looks great on my iPhone 5 in portrait, but when viewing in landscape the logo goes away.

    iPad 3 looks good too in landscape mode 1024, but I had to add white space in the image on the left to prevent the logo from getting cut off on the left side. It’s using the image uploaded via the header setting and not via your plugin. In portrait mode the logo goes away.

    For the 480 small tablet portrait, the logo is getting cut off. at the bottom. Disabling the javascript did help, but do I really want or need to to that? Should I try added padding or margin to the main CSS for either the title section?

    I’m also having an issue with the header right widget that currently contains their reStore logo. It drops down, which is what you intended, but in this case I don’t want it to drop down. It appears the width of the header widget area bumps into the title area, causing the reStore logo to drop down. I’ve played around with the CSS targeting the various classes within the header widget area with mixed results.

    #header .wrap .widget-area #text-2 .widget-wrapbut

    As the width gets narrower the logo ultimately drops below the menu.

    Thanks again for a great plugin. Looking forward to future options and capabilities.

    Jeff

  26. I’m working on a site — applebarrelcountrystore.com and using this plugin. Just wondering why it seems to not fill the 100% space for the header on tablets & mobile devices? The header is resizing, but not at the correct width? If you have any ideas of what might be causing this, thanks! 🙂

  27. I’m using it on a client’s website and it looks terrible. I guess its getting resized, but it looks pixelated. I even tried making a 2x version and its terrible. What am I doing wrong?

    • Brain,

      It’s hard to say in the comments. I’d need to see the site and probably have some back and forth. Could you send a message via my contact form. thanks.

  28. Hi Nick

    I’m having a similar issue to Jeff with the Genesis Metro responsive theme. The smaller logo versions will display once the window size is reduced but the larger default desktop size logo does not appear.

    Even if I use (the working) smaller logos as a replacement for the 768 Logo Image it will not display on the larger screen/window sizes.

    Matthew

  29. Hi Nick, I’m just checking in to see if this plugin is going to make it out of beta and into the WP plugin repository — I would love to recommend it to my clients who are struggling with mobile responsiveness. Thanks for creating it!

    • yes, I am working on what I hope to be the final version. I just hate to put beta stuff into the repository, at least early beta stuff. Technically my GFWA is still in “beta” but only because I haven’t added all my road map items so it hasn’t made it up to v 1.0. This is really beta though. Hope to have it done shortly.

  30. Please take a look at 800×600 pixel browser. It is still too large here. Also for Genesis Metro it should have another step at 1024p since the theme offers a standard width of 1080p.
    Tx (!), Peter

    • The 768px device width is the widest that it works with by default. The latest version does have an option to allow for custom break points.

  32. Hey Nick

    Installed the responsive header and all seems to working well except with the iPad in landscape

    It keeps cutting off the right side of the header image. All other images seemed to be rescaled correctly

    Otherwise it works well

    Thanks Peter

    • Peter,

      The responsive header output only goes to 786px wide by default. The iPad in landscape is wider than that. You can use the latest version to set a custom break point if you wish to use it for wider than 768px.

  33. Thanks again for the plugin. I am using the 0.2.1 updated version and using the Mindstream child theme which does not use a header image, however I am.
    I have notice on a 10″ iPad that when turned in landscape it is repeating a small part of the header image.
    Is this something that should be corrected in CSS or the plugin?

    http://www.ronaldbigbie.com

    Thanks!
    Ronald

  35. Hi Nick,
    I just uploaded your plugin, but I am really confused. Do I have to resize the image before uploading or will the plugin take care of that for me? Please respond, and Happy Resurrection Sunday! He Lives!

  38. Hi Nick,

    I just uploaded the plugin to three sites. Worked perfectly in Genesis/Prose for my site at http://futureexpats.com.
    Also worked perfectly for a new site I’m putting together using Genesis/Balance at http://thephoenixrisingcopy.com.

    Behaved very weirdly on my WordPress site — go figure — http://wpbuildingblocks.com, also a Genesis/Prose site. It appeared to install properly. However, when I clicked on the Genesis menu it showed up twice, and the form also displayed twice when I clicked on it to set it up. The form didn’t function — area to choose background color was blank and upload button didn’t work. Naturally this is the site I most wanted to use it on. . .

    Suggestions?

  39. Hi Nick,

    Just tried using this plugin for the Pinsomo child theme for Genesis (the link is connected to my name, above). I’ve created smaller versions of my logo for each size (768, 480, 320, 240). When I re-size my browser window or check it on several phones, the header attempts to resize, but it’s not calling the smaller logo. Also, when I resize in my browser, the logo does not fully return to the original size.

    I can edit CSS if I’m told what to do, but I’m not a good enough programmer to mess with the code and figure it out for myself.

    If you have any ideas, I’d sure appreciate it.

    Thanks!
    -Mike

  40. Nick – love this plugin! I have a problem on my site though. The logo appears fine on the desktop version of the site but on all the mobile sizes the logo appears twice. I’m using Genesis with the eleven40 child theme.

    My site is http://AccountingUnleashed.com.

    Any idea how I can make this work?

    Thanks!
    -Mike

  41. re: http://newparadigmsolutions.org

    Using Legacy theme.

    I tried to assign a .png logo to the plugin but when I do the “upload” from the media library, nothing shows up in the text box. I don’t think is is a permission issue. Any idea what is happening. I’ve used this plugin on the Optimal theme with no issues.

  42. SOLVED!

    Who is the dumbest web guy on the planet? I’m raising my hand here! Nick wrote me and said to simply paste in the URL of the logo-graphic (from Media Lib) and click “save.” Worked just fine. I never would have thought about bypassing the WP Thickbox media loader logic. I figured that it did something special to the graphic. It doesn’t. It just finds the URL… which anyone can get from the Media Library!

    Man, am I stupid or what?

    (Oh, he said the issue might be a javascript conflict between his plugin and the theme.)

    Thanks, Nick. You da man!! (And I’m the idiot!)

  43. Nick,

    Trying to use the plugin with the Education child theme. On my iphone4s is seems like the regular logo is on top of the plugin logo. When I turn it sideways (landscape) there is no logo.

    On my iPad, there is no logo (portrait), though when I turn it sideways (landscape) the logo is there.

    http://venturionsanantoniotx.com

    Any ideas?

  44. I’m using v.0.2.1 on Geneis 1.9.2 but can’t get the uploader to work. The files upload to the media gallery but when I hit the “I want this to be my logo” button, the popup closes but nothing else happens. The URL of the file doesn’t show up in the upload box. Have tried freshly uploaded images as well as from the medial library.

  45. Nick, we are using the education 2.0 theme and your plug-in, which by the way is fantastic we love it!

    We are having a problem in the education theme with the landscape versions not really showing up well.

    I don’t know if it’s bumping into the menu or what we’ve made no manual adjustments to the CSS.

    Here’s a short video showing you what’s happening
    http://screencast.com/t/lQXPLUSLLa8
    http://www.agentpipeline.com

    I would truly appreciate any help you can provide. Thank you! Paul

    • Paul,

      I added some additional CSS due to some issues in the Education theme, please try the latest version. If that doesn’t work let me know so I can see what might need to be changed in your CSS. Probably the #header .menu needs to be set to position: relative; in the responsive section of the style.css file.

  46. Hi Nick!
    I am using your plugin but it doesn’t save the settings. I already deactivated all my plugins to avoid a conflict but nothing changes.
    I thought I could add the image url through the database but I don’t know what data is the image path.
    It looks like this:
    a:16:{s:9:”768-image”;s:0:””;s:12:”768-image_id”;s:0:””;s:16:”768-image_height”;s:0:””;s:9:”768-color”;s:7:”#ffffff”;s:9:”480-image”;s:0:””;s:12:”480-image_id”;s:0:””;s:16:”480-image_height”;s:0:””;s:9:”480-color”;s:7:”#ffffff”;s:9:”320-image”;s:0:””;s:12:”320-image_id”;s:0:””;s:16:”320-image_height”;s:0:””;s:9:”320-color”;s:7:”#ffffff”;s:9:”240-image”;s:0:””;s:12:”240-image_id”;s:0:””;s:16:”240-image_height”;s:0:””;s:9:”240-color”;s:7:”#ffffff”;}
    Could you, please, help me?
    Thanks!
    Isma

  47. Hi Nick,
    Love the plugin. Just noticed that it is no longer working on my site and has been fine for months. Could it be the latest genesis update?
    Thanks,
    Jenny

  48. Nick, how can i get rid of the white above my header image when I access the site through a galaxys2 compared to the website that has no white space at the top of the header?

    Thanks

    • you are using a massive 1600×600 image and then scaling it to fit much smaller screens. At times the height and width don’t match up perfectly so the background of the #header shows. You might want to consider starting with an image that is better suited to the device width so the download time is better and then set a background color for #header that compliments your image for times when parts of the Header background might be visible.

  49. I see several people have asked about this problem with the plugin causing a ‘none’ file to try and load. It seems to be slowing my page loads. Do you have a fix for this?

    Thanks!

  50. I am trying to get this to work on a Multi Site install, but no settings tab appears in the menu. Will it not work for MS?

  51. Hi Nick,

    Do you know why there is so much white space above and below my header image when viewed on an iphone or other small device? I uploaded images that were suited to each size. Or, at least I think I did. Thanks for you time and for the great plugin!

  52. Nick ~ trying to make this work on WP 3.6 w/ Genesis 2.0 to no avail.
    Would send you a link, but have to make this site work today.

    Unless your reply is no more love for this plugin; I’ll put it up on a dev. server later tonight for you to see. Please advise.

  53. I can’t get it to work on the updated Appfinite Legacy theme (HTML5) with Gen 2.x. Nothing I’ve tried makes the small graphic logo reduce in size so it looks OK on a cell phone. I really need a responsive header here so any help is appreciated.

    Site: http://surgeonsstory.com/wp/

    Thanks.

  54. I created my own child theme from Genesis 2.0.1. Installed your Responsive Header, version 0.9 today and activated in plugins. It’s not showing up in my Genesis dashboard. Any suggestions?

  55. Hi Nick, I see you did wonderful job. Nevertheless, I didn’t work for me. Do you have any documentation or instructions or some hints how can I use this plugin. I’m using Metro Pro Genesis child theme and this plugin doesn’t do any changes in my header. Do you have any hint how to proceed? Thank You for your time. Martin

    • Di,

      Thanks for asking. I’m sorry but the comments really aren’t a great way to get support. I’ll be replying to a bunch of them then closing comments so people do not keep trying to get support via comments.