Here’s how I got a full width, responsive header with a link to the homepage using the Innovative and Genesis themes on WordPress.
Making your WordPress site ‘responsive’ so that it displays nicely on different sized devices is something I see many people are struggling with the same as I have done. Even when you’ve got a theme like mine that is already designed to be responsive there are often tweaks you’ll need to make. In my case it’s been to adapt the header. Because it’s just taken me a long time to work out how to do this I thought I’d share the fruits of my toils so that other people using the same or similar themes may benefit!
So here are the exact changes I made to the Innovative theme (by The Pixelista) to get a full width, responsive header, displaying differently on different sized devices, and with a link to the homepage. Something similar may hopefully work for you if you’re using this theme or other similar ones. I make no guarantees whatsoever that this method will work for everyone so please be careful and **ALWAYS keep a copy of the original versions of the files you are altering in case you need to revert back to them.**
These notes assume you want a header image which fills the entire Innovative header block, with constant height 120px and up to 960px width (displaying narrower for smaller devices). If your header’s a different size you’ll need to adapt my method.
NB Don’t use NicktheGeek’s Genesis Responsive Header plugin with html5 templates (like Innovative). It’s a great plugin but sadly it doesn’t work on this type of file. If you’ve already loaded that plugin on an html5 site mistakenly (as I did) and uploaded header files using it, I recommend you remove both the plugin and the headers and start again.
1. First, in the functions.php file, delete or comment out this part:
This change has the effect of removing the function in your WordPress admin that lets you upload custom headers. You have to do this because loading custom headers that way stops the responsiveness working properly. Don’t worry about why, it just does!
2. Now in your wordpress admin panel go to Genesis -> theme settings and under ‘Header’ select ‘Image logo’ rather than ‘dynamic text’. Remember to click save.
3. Create your header image files and if you can load them via ftp or your server’s admin interface direct to the Images folder inside the Innovative theme folder. If you load them via your wordpress admin it will still work but it stores the images in an awkward folder. I just find the theme’s main Images folder is easier to deal with.
4. In the style.css file I made the following changes. I hope they work for you too! But just in case, I say again make sure you keep a copy of the original version of this file so you can go back to it.
And add this directly below it:
Then under “Image – Partial Width” change this:
These changes will serve to place your full sized header image as a background for the entire header section and ensure that the header area will be clickable back to your Homepage.
Note that the 600 width is 960 (full header width) minus 360 (header widget width). There are two reasons for altering this setting. The main reason is that when your smaller headers are displayed for mobiles they are loaded within the site-title block, which is on top of the header background. If the site-title isn’t set wide enough it will chop part of your image off and thus also make part of the background visible behind it. It took me some time to figure out that’s what was happening! The other significance of that width setting relates to the fact that the site-title area is the clickable part of your header, the part linked back to the homepage. Making it 600 wide means that only the header area to the left of the header widget will be clickable, rather than the entire width.
So, if you are seeing part of your full-width header behind a responsive header or you don’t use a header widget and want the whole image clickable you may want to fiddle with that width setting.
5. Also in the css file, add the code which will call up your header variations for smaller devices. Add as many size variations as you need. I’ve got 3 extras but you might need more or less depending on how your design displays when you try it. The urls should be whatever the locations are for your own headers.
I changed this:
And added this directly below it:
And directly below this:
I added this:
And right at the bottom of the file I added this:
So I’ve now got my main full sized header plus 3 smaller ones for mobiles. You could add extras such an even smaller one at the end if you needed it:
6. Finally, load the revised functions.php and style.css files to your child theme folder via ftp, ensuring (yet again!) that you have kept a copy of the original versions just in case. Fingers crossed you should now see nicely responsive and clickable headers.
No doubt when you come to view your site you will need to do a bit of editing on the images and maybe some of the dimensions I’ve used but at least you’ll know which bits to focus on.
It took me ages to get the images looking right because the way they show up on different mobile devices is quite unpredictable. In particular, when you switch between portrait and landscape some devices recognise that the width and height have swapped over, others always seem to see the ‘width’ as the longer side whichever way you view the screen and therefore select the ‘wrong’ image. So you’ll just need to fiddle around with your images until they can accommodate the awkwardness of different devices. I used two different responsiveness testers to check how things would look (the Studio Press one and a plugin called Responsive Page Tester). I also gathered together all the mobile devices in our house (assorted laptops, tablets and phones), to check how they displayed in the flesh as it were. Even so I still keep finding screens that display unexpectedly.
The comments section is open here but as you’ve probably gathered I’m no trained-techie so may not be able to answer any techie queries you post 😀
Some related useful posts: