How to Make Your Genesis Logo Responsive

If you’re using a Genesis child theme and want to use a full-width header, you’ve probably realized it’s not as responsive as you’d like it to be. The good news is that there is way to make it your Genesis logo responsive that isn’t too terribly difficult, and this post will show you how.

Get your logo to stretch

Why Would You Need a Responsive Logo?

Ever since StudioPress made responsive designs the default in Genesis child themes, it appears that the unspoken but recommended layout is to have a little logo in the top-left of the site and a menu in the top-right.

With a smaller logo, it doesn’t matter if the browser window is smaller because the menu on the right can just slide under the logo, and everything is still visible.

But what if you want to use a full-width header on your site? By default, you’d be out of luck with a Genesis theme. The rest of the site would be responsive, but the right side of your logo would be disappearing off the edge of the page.

Not very pretty.

Bending Genesis To Your Will

To fix this problem, some (cf. The Pixelista, Pretty Darn Cute Designs) have been advocating creating several copies of your logo image, each one a different size, and then using media queries to select which size to display, according to the user’s screen size. There is even a plugin that does the same thing.

That’s certainly one way to do it, but not the best in my opinion. Not only is creating all those logo copies an unnecessary waste of time, it also is a shoddy way of handling responsiveness. Plus, if you change your logo, you’d have to create all those images again.

What you are about to read is an easier way to get the full-width responsive logo you want, using CSS alone.

Using CSS to Make a Full-Width Genesis Logo Responsive

Step 1: Upload your logo image to the images folder inside your child theme folder. By default it should be named logo.png. You can change that if you want to, just remember that you’ll also need to change the URL in the CSS rule to match the file name.

Step 2: Make sure your Genesis theme settings are set to show the logo. From your admin dashboard, go to the “Theme settings” page under the Genesis menu item in the admin menu. Scroll down to the “Header” section and make sure the drop-down selects “Image logo” (not “Dynamic text”).

Step 3: Add this CSS to the style.css file.

Note: These CSS rules are to replace any that are in the stylesheet by default

The reason this works is because it is adjusting the image size based on the height of the header container, not the width which is usually how responsiveness is achieved. It also is placing the image in the center of the container, not on the left like it was in the default CSS rule.

Step 4: Now that we have the image set to adjust based on the header height, create CSS rules to create different header sizes, based on screen size.

Say, for instance the original image had a width of 960 pixels and a height of 250 pixels, setting the header height to 125 pixels will cause the image to shrink proportionally to fit in the container making the width 480 pixels.

Depending on your logo and the rest of your site design, you’ll need to create a few of these media queries to keep everything looking good.

You can see the final product of this technique on a site I did for Four Pegs Beer Lounge.

Let Me Help You With That

Making your Genesis logo responsive isn’t an easy task, no matter what method you use. If you want a full-width responsive header and decide that you don’t want to do it on your own, click here; I’d be glad to do it for you.

For more articles about WordPress, web design, and web development, click here to follow Avid Netizen on Twitter or click here to sign up for the email list.

Photo Credit: Shari