How to Create a Mobile Responsive Header for your WordPress Site

You’ve created a fantastic WordPress website, you’ve made it mobile responsive, and it’s filled with interesting and useful content. It’s perfect. . .

Except for one thing.

When someone looks at your site in a tablet or on a smartphone, they only see a tiny bit of that glorious header image you spent so much time with.

Sadly, just because your theme is mobile responsive, it doesn’t mean that header image will be equally responsive.

There’s good news, though. If you’re using a StudioPress theme on the Genesis Framework, there’s a new plugin in town that’ll take care of that pesky header problem.

It’s called the Genesis Responsive Header Plugin. It was created by “Nick the Geek,” long-time programmer and tech-support guy at Copyblogger Media (the folks who own StudioPress).

You can download the plugin here. (It’s free.)

Note: If you’re using one of the new or updated themes with “Pro” in the name, this plugin won’t work. It’s designed for the themes that aren’t yet HTML5 compliant.

Nick the Geek

Go ahead and install it –find instructions here. Scroll down to the part where it says, “Installing the Plugin as an Upload from your Computer.”

Resize your Header Image

The Genesis Responsive Header plugin substitutes smaller versions of your header when someone’s looking at your site on a smaller device. You have to create those.

#1. Open your header image in a photo or paint program.

I like Paint.net, which is a free program you can download here. It doesn’t really matter what program you use as long as it allows you to resize an image.

#2. Create four new images

You’re going to resize and save four smaller versions of your original header image.

Make sure you set your program to maintain aspect ratio. Some programs say keep proportions. That means when you adjust the width, the height will automatically change to keep the proportions the same — otherwise you can end up with some very strange-looking images!

resize your image

Here are the image sizes you want:

  1. 768px
  2. 480px
  3. 320ox
  4. 240px

Add the Images to the Customizer

Now, on your WordPress dashboard, navigate to Appearance / Customize.

Customize

After you click the Customize link, you’ll see four places to upload an image, and four places to specify a background color.

To add the first image, click the dropdown button under the words “768px Logo Image.” Drag and drop your image, or select the file.

upload the new header image

Then choose your background color from the dropdown button under the words “768px Header Background Color.” In this case, I chose white.

Continue with each item in turn. When you’re finished, you’ll have something that looks like this.

New header images uploaded

When you’re done adding images, click the Save button above, and you’re all set.

Test your New Header Images

If you have a variety of devices — tablet, smartphone, etc. — just browse to your site and take a look. You should see that the header image changes its size to fit nicely into the space available on each device.

If you don’t, you can still test it.

StudioPress has a handy mobile responsive testing page. Just enter the web address for your WordPress site, and they’ll show you how it looks in a standard smart phone (upright), smart phone (sideways), small tablet and large tablet, as well as standard computer screens.

Here’s how this site looks now that I’ve made the header mobile responsive.

test site for the Genesis Mobile Responsive Header plugin

Notice that the header image has adjusted itself beautifully to fit each size screen. I can also see I’ve got a problem with the columns underneath, though. In the smallest size, they’re overlapping. I obviously have some work to do. ..

Got Questions?

  1. Hi there,

    A great guide. It helped me a lot. I was desperately searching on Google and I landed on your blog. :) Great stuff!

  2. Cecelia Pineda says:

    Hi Susanna,
    This is Cecelia from MMW in very preliminary stage. I have built a website using Weebly which I was very happy with but haven’t kept it up. Now wondering whether to switch to WordPress. Have you ever seen or used the Thesis theme?

  3. Hi Cecilia,

    I’ve never used Weebly, so can’t really comment on it. I highly recommend WordPress, as you know, and believe it’s a much more versatile platform that will do better for you in the long run. As to Thesis, I don’t recommend it. It’s got a very steep learning curve, and a LOT of very prominent bloggers and WordPress developers have been switching from Thesis to Genesis (StudioPress) in the past year or 18 months. If you Google it you’ll see some of the many articles about why StudioPress is a better option today.

  4. Hi Susanna,

    I installed the plugin, and upload the header images accordingly. But for some reason they are not updating. Do you have any tips for when that happens?

    • Hi Gaby,

      First, are you using a Genesis theme, and second, is it already HTML5 compliant? (If it has “pro” in the name, it’s HTML5). The plugin was designed to work with the older, non-HTML5 themes. If you’re using one of the “pro” themes you may not need to do anything to make your header mobile responsive. It depends on the theme, and whether or not you’re using an image header.

      But thanks for reminding me that I need to make a note on that article!

      Susanna

      • Hi Susanna,

        I have used Nick’s plugin on the older StudioPress templates and it works like a charm. But like you responded to Gaby, it does not work with the new HTML5 templates. Question: Do you know if Nick plans on updating this plugin to work with the newer templates? Gonna ask Nick this same question, but checking to see if you know anything first. Thanks!

Got Questions?

Is there something you'd like to know about WordPress? Ask your questions here!

*

rzRF

Please type the text above: