Easy Mobile Responsive Header


Having a fully responsive website can be a lot of work.  Given that everything you do affects everything you do, potentially, and there is so much to the responsive piece, it can be quite overwhelming.  One of the biggest challenges I’ve come across relates to those who like a larger header on their site but also want their site to view well on a mobile device such as an iPhone or iPad.  Since these devices can have very small display screens, without doing some extra coding (which is a challenge for many, based on their current skill set or desire to learn the techie side of life), a larger header will not show well on a smaller device.

If you are using the Genesis framework on your site (and most of my clients are), you are in luck!  Nick the Geek has provided an awesome solution to this issue in the form of a plugin called the Genesis Responsive Header Customized!  I absolutely love this plugin.

Basically, it allows you to take your larger header and create up to 4 smaller versions of the same header using a simple image editing program of your choosing.  Once you have these 4 smaller versions, you can upload them to your site and specify when they should be used via the customized under APPEARANCE in your dashboard menu.  WP Building Blocks has a great how-to article here with specific directions, including a free image resizing program link/directional.  One note, this plugin only works with themes that are not yet HTML 5 compliant.

Take a moment to see how your header looks on a mobile device.  If it doesn’t look the way you’d like, this might be a great and easy option for you.

Prefer not to do it yourself?  Let me know and I can get you a quote to do it for you!

Looking for more content like this?

Click here.

Here are a few posts we also thought you’d enjoy:

SEO and Beaver Builder Page Builder

Choosing The Best WordPress Plugins

How to Fix Problem Receiving Form Notifications from WordPress Website

Want to Pin it?  Use this image ⤵️