This Genesis theme is nice and responsive. See how this drops down, it gets nice and smaller, things collapse, widget areas collapse and so it can fit in a smaller environment or a smaller space. But the one thing that it doesn’t do this is this image here in the header. If you have a header image that spans from side to side, it would just start cutting the image off. As soon as you got to this point, the header image would be cut off and it would just get more and more cut off until you got to this point right here which I think is not a good idea.
BYOB Genesis Responsive Header Image
I wrote this cool plugin that makes the Genesis theme header responsive to solve that problem. You will be able to get this plugin from the lesson resources section over here in the lesson 11. I’ll have a link to this plugin and the next plugin that I’ll be demonstrating but I don’t have that set up quite yet so I’m going to have to install this from my own computer.
Here we are in plugins and I want to Add New. The plugin that I’m going to add is called, BYOB Genesis Responsive Header Image. Now we have that activated. And as soon as you have that activated, on the side here will the BYOB Genesis plugins will show up and we’re going to configure the responsive header.
The responsive header has two settings. It has a URL for the logo image that you want displayed when you are looking at a device between 501px and 959px wide so that’s essentially tablets. The thing that you want to do is to pick an image that’s 500px wide then upload that to your Media Library and put that here. Then you’re going to want another image that you’ll put here for devices that are 500px wide and smaller.
In my case, I’m targeting the iPhone which in its portrait mode is 320px wide so that’s going to be the width of the image that I’ll put here. I’m putting one here that’s 320px wide and I’m putting one here that is 540px wide. Let’s go to the Media Library, Add New and select my files. I have those files sitting in my graphics section under tutorial graphics, Start Building Your Website Here, Genesis theme and I’m going to pick my 320px image and my 540px image.
Customize Header Image Size for Mobile Devices
The 540px image a bit too big but you’ll get the point out of it. This is the address for my 320px image. For the small image, I’ll put that URL there and for the large image, capture that URL and put that one here. When we refresh this page, what we should have is as soon as we get to under 960, everything changes. Now we get a different image that jumps up here above the menu and when the menu drops down, we come down here until it gets too small then it switches down to the smaller one and stays at that.
If you’re looking at it in devices 240px wide, then it’s going to get cut off. If you want to hit the older smart phones, then you might want to make your header image only 240px wide instead of 320 but that’s what that does. That gives you a header image that sits here and when it gets smaller, it centers itself above the menu and gives you a wider image then when it gets to the smallest level, it shows you this header image. That is the responsive header image.
Actually I should’ve just pointed out, if we go back over to our Media Library, that this 540px one is 540px wide and 150px tall and the other one is 320px wide by 115px tall. You keep maintaining that same 115px width because that is the height that the Genesis theme defines for the header area so all I’ve done is make it smaller. And this is just for BYOB members – the BYOB Genesis Responsive Header image and in fact, you’re going to see that I’m going to unveil tonight also the BYOB Genesis Contact Form 7 Styles plugin.