Getting Your Head Around Header Images

7 Header Logo Image Options for Genesis Themes

Does this perfect beer head(er) inspire a call to action?

The world’s most valuable brands understandably have logos that are immediately recognizable. One of the things that helped them become highly valued is the emotion or call to action that is felt just by viewing their logo.

For other brands, this is less true. In many cases we might recall a name, a product, a URL or a related person before we can conjure up the logo of many companies – big, small, new, old.

Yet so much hubbub and hullabaloo is made of logo size, placement and prominence on websites for everything from mommy bloggers to monster online stores. Everybody wants to get to the top of the pile and be recognized.

Web designers and developers have to deal with this on a regular basis. This post gives examples of how we deal with it when using themes for WordPress that use the Genesis Framework. Genesis helps make this easy work with great results.

Option 0 – “Out of the Box” Site Title Text

When you’re trying to make a name for yourself a logo might just get in the way. I’ll remember “Fred’s Fries” before I recall his logo of twisted squigglies in some colour that might be mustard. This is where you forgo a (prominent, header) logo image in favour of clean, legible text, which is what you get without fuss just by entering your site name in the theme customizer. With Metro Pro you can choose from four pre-set colours.

Option 1 – Site Title Text In Custom Colours

The default site title appearance is white text over a block of colour as selected in “Genesis > Theme Settings > Color Style”. The specific colour is defined in the theme stylesheet color section (starts at line 1512 in style.css v2.0.2). You can change the text and background colours to be anything you like by editing the CSS for the site title. Maybe you want to use Metro Pro green ( #21c250) for everything else, but specific tones for your title area and text. So, not an image, but still a custom header look.

As you might find in many Genesis themes, Metro Pro provides a method for you to upload an image to be used as a header image (a.k.a. logo). Simply go to either the WordPress theme customizer or navigate to “Appearance > Header” to select your image and upload it. This is what the theme was designed to present plus:

it’s easy to do,

the small image won’t impact page load time, and

a small image is suitable for all screen sizes, right down to smartphones.

It also leaves loads of room for the Header Right widget area, where you can position a search box, nav menu, advertising, call-to-action or whatever.

The size is specified in functions.php with this code snippet:

Metro Pro - functions.php

1

2

3

4

5

6

7

//* Add support for custom header

add_theme_support('custom-header',array(

'width'=>270,

'height'=>80,

'header-selector'=>'.site-title a',

'header-text'=>false

));

This code:

defines an image of exactly 270 pixels wider by 80 pixels high. (Any other size will be cropped.)

defines a CSS class of .site-title a to allow for added style tweaks

turns off the use of the site title text (“Metro Pro” in the theme demo)

We’ll see that we can manipulate this code to allow for different header image options.

Option 3 – Default Image Size + Site Title Text

Because the StudioPress method uses a background image, we can use a variation with an image but also retaining the Site Title text. To do this:

Upload a suitable image (270 x 80 pixels) to serve as a background to your text.

Edit the last line in the above code snippet to be:'header-text' => true

We keep the benefits of using an image in the default size, now overlaid with our site name.

Option 4 – Custom Site Title Text

Here I’ve enqueued the Lobster font in functions.php and specified it for use on the site title in this code from line 886 in styles.css.

Change the Site-Title font

1

2

3

4

5

6

7

.site-title{

font-family:'Lobster',sans-serif;

font-size:48px;

line-height:1;

margin:0016px;

text-transform:uppercase;

}

Had Enough?

Beyond these simple tweaks you’re probably thinking of using a larger image. Maybe even a logo. (They’re not necessarily the same thing – not all images are logos.) First, take a break and ponder these two parables about wading into the deeper waters of super-sized logos – then get ready to answer some questions about what you really want.

Make the logo Bigger?

Option 5 – Custom Image Size – Not Responsive

If you’re wanting a big, banner image and don’t care about your the header image being responsive to the smaller screen sizes of tablets and smartphones, you can continue to use the built-in theme features of Metro Pro. This might work for you if the image is only for color branding or only the left portion is significant (the right side being cropped on smaller screens).

Metro Pro has an effective “full” header width of 1068 pixels (1140 less padding). To make use of this area, first empty the Header Right widget area of all content.

We can place a full-width banner image by changing the image size in functions.php …

1

2

3

4

5

6

7

//* Add support for custom header

add_theme_support('custom-header',array(

'width'=>1068,

'height'=>100,

'header-selector'=>'.site-title a',

'header-text'=>false

));

… and matching this in the theme stylesheet (line 931) …

1

2

3

4

5

6

.header-image.site-titlea{

background-color:none;

max-width:1068px;

min-height:100px;

padding:0;

}

This looks good on desktops …

.. but, because it’s not responsive, the text in the image may get clipped on smaller screen sizes.

This does work for some requirements – such as

keeping an image with embedded text legible on smaller screens,

use-cases where small-screen devices will never be used,

the image is mostly a pattern or texture, and

when the image may need to be changed by users, making the header image uploader more important and convenient (seasonal changes, promos, features, etc.)

However this will usually leave most people wanting something more for their readers, meaning a fully responsive header image.

Option 6 – Custom Image Size – Fully Responsive

The Holy Grail of header images is to be fully responsive – ie. the image is resized to be fully visible no matter the screen width. (What this gives up is the hope of any legibility on smaller devices of smaller text embedded in the image.)

Genesis developer John Sundberg appears to be the first to have put together the pieces that make this work visually, even though his initial motivation was to improve the social media sharing of the site logo image. Sridhar Katakam further refined this method with CSS for use with Metro Pro. I’ll include both pieces here to make this review complete but full credit goes to John and Sridhar. With some minor CSS modifications this should work with other Genesis themes as well (examples: Executive Pro and Lifestyle Pro).

Four small steps make this work:

1. Disable the existing header image setup:

Disable the header image setting in functions.php by commenting-out or deleting this code:

functions.php

1

2

3

4

5

6

7

//* Add support for custom header

add_theme_support('custom-header',array(

'width'=>270,

'height'=>80,

'header-selector'=>'.site-title a',

'header-text'=>false

));

2. Add this code to the bottom of functions.php:

This builds the HTML around the header/logo image. This code is using an image file named “logo.png” in the child themes images folder, as in step 4 below.

functions.php

PHP

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/**

* Filter the genesis_seo_site_title function to use an image for the logo instead of a background image

*

* The genesis_seo_site_title function is located in genesis/lib/structure/header.php

No need to edit media queries or load different images for different screen sizes.

style.css

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

.header-image .site-description, .header-image .site-title a {

text-indent:0;

}

.title-area {

width:100%;

}

.header-image .site-title, .header-image .title-area {

min-height:0;

}

.header-image .site-title a {

max-width:none;

min-height:0;

}

.site-title a, .site-title a:hover {

background:transparent;

padding:0px;

}

.site-title img {

vertical-align:top;

}

4. Prepare and upload your header image:

As noted above, Metro “full” header width measures 1068 pixels and you can use any (reasonable) image height. In this example I’ve used an image of 1068 x 300 pixels. To match the above PHP code snippet the image must be named logo.png and uploaded to the images directory of the theme.
(for example: mysitename.com/wp-content/themes/lifestyle-pro/images/logo.png)

If you must use a different image name or location you’ll have to tweak the PHP code (line 13 in the step 2 snippet) to match your image name and/or location.

This method produces a good image result at desktop screen sizes, at each breakpoint in the theme stylesheet and is responsive to all sizes in between.

Thanks so much Tom
Metro pro is a great theme but lacking a full width responsive header is a major omission.

Your code worked perfectly without any alteration and makes my site work exactly as I wanted.
Your code is a very valuable modification which should be made available within the Studiopress help or theme setup pages

I’ve followed the instructions in your article, but for some reason my header image has a small border on the top, left and bottom of the image that is the color of the active “color scheme”. There’s no border on the right side of the image, and this border disappears when you hover your cursor over the image. Any ideas? Please help if you can. It looks very awkward. Thanks!

unfortunately this did not work for me either. I have already tried the instructions from Brad @ wpsites and the pixelista r/t this theme, so I’m not sure if something else is in there preventing this from working. If you’re willing to look at mine too I’d be happy to share!

A quick look at your site … (1) the image in place is set by your stylesheet (“julieg-header.jpg” – perhaps from your earlier attemnpts?) not the responsive method using code in functions.php. (2) The image you’re attempting to load with PHP (“/images/logo.jpeg”) does not exist. I’d suggest starting afresh by backing out the attempts you’ve tried and starting over with this tut for Lifestyle Pro.

I used a different tutorial to remove the logo and set up what should be a responsive full-width header by replacing the site header background image. Unfortunately, the result is a full-width but not responsive header. 🙁 I’d like to give your tutorial a try to see if it solves my problem, but I’m wondering if it will still allow me to have widgets in the right header area. I don’t see that in any of your examples. (I’m using Magazine Pro.) Much thanks!

Thanks for this informative article as it’s something I’ve been trying to figure out for a while now. I did option 6 on my site but there’s nothing showing up as my header now. Any thoughts on this matter would be great!

John, I noticed that on one of my sites, liquorfists.com there is no border to my header image, but on my other two sites strivingforfreedom.com and vikingsmashbrewing.com there is a border around the image that is the color of whatever I set the theme color to.

Thanks for the post, but I’m having some trouble getting it to work. I went through all the steps, but the image does not appear in my header. Instead I get a blank box with a grey border and a broken photo icon in the center. The photo is named “logo1.png” but I updated the code in functions.php to “logo1.png”. My website is http://www.brightpeachmeditation.com. Any ideas of what I’m doing wrong? Thanks!

I did what you said and it works, however it only works for my iPhone. (Only when I hold it vertically.)
On the desktop version of the site there is only a white banner at the top. (Aka no logo/banner.)
Also when I tilt my iPhone horizontally (landscape), the banner disappears and goes white (just like the desktop version.) (But it works on my iPhone when I hold it vertically.)

Yes! Whatever you did … Thank you!! I changed the code and added the “}” to line 2040. When I reloaded the webpage the banner appeared on the desktop version, however it still doesn’t work on landscape mode on my iPhone. In landscape mode it’s still a blank white banner at the top. Any thoughts??

Thank you for what seems to be the solution. I don’t know how I would’ve figured this out on my own. But I’m still getting an empty box with a broken picture image where the header should be on the small size/mobile devices etc.
I’ve tried looking in the style.css file but can’t seem to find what’s causing this.

I did everything like you said and am happy to say it worked – I am using News Pro theme.
My problem is that the actual site title and tagline are showing underneath the logo.
Everything else appears to be working great…
Am I missing something?

Hi Tom,
Thanks that worked to get rid of the description under the header but now there is still a white space underneath the logo and the logo is smaller than its actual size.
The logo I uploaded is 250px high with width 1140.

It appears the code has shrunk the logo to – anyway when I went back and looked it appears to be working? weird….just those 3pixels that are underneath – not sure where they are in the style.css but will look…

I should have been more meticulous in making the stylesheet changes as I was also working with another theme change you were doing for Executive Pro..
Yes that’s it – I’ll copy it here for you…works with News Pro!! latest version!! It’s responsive but on my laptop there’s a big whitespace when I change it.
Also on my iphone huge whitespace under the header – but the header itself is responsive?

Well as that didn’t work I went back to your method in Option 6 Step 3.
and got rid of the text underneath.
Weird is all I can say – now its got padding everywhere around the header
Header is 1140 x250
Now it is looking to have padding everywhere but
it is responsive 🙂
I want it to be the size it is so it spans the width and height of the header.
Help!

This is a test site I am working on -converting the base site from joomla to wp.
I am using foodie pro theme and they won’t help me with customizations. I guess that is the problem with 3rd party themes.
Anyway, I want the logo on the left and a widget on the right. I had it working with the genesis widget and some css but the logo was not responsive and the widget collapsed on top of the logo when I made the screen smaller. I was able to fix it in phone screens by adding a padding to the bottom of the logo but it won’t work in the gradual resizing of the screen. I tried your code but didn’t work. I also didn’t spend much time on it either.
Any help you can give me would be appreciated.
Thanks!

Hi Tami,
Foodie is a popular theme, but I’m not really familiar with its structure and options. (I’ve never found a theme that includes customization services, Genesis or otherwise.) Since you want something in a widget at header right, I’d suggest you use a smaller logo for header left, around 320px wide max. This sets up the desktop view per your wants and eliminates the need for a responsive image. If you want the header widget content to float on top of a wide logo, try adapting this tut for Magazine Pro.

Thank you!. I did get it to work but I’m not happy with how it comes together.
I have another site for same org. and they have a full width header. It is also a joomla to wp conversion. I kept the foodie theme for now. Your code words great with it but I have padding around the logo. I am trying to figure out what section is setting the padding.

Maybe you have another suggestion for a different theme that will work. I kept Foodie because I am familiar with it but it has a lot of stuff I am not using.

Works great! I have used this on several sites recently. Any suggestions on how to make the logo center in the area. Currently there is too much space below it. I have added padding to the top to try to center it more but would like to find spot where it is adding the space on the bottom.
Thanks!

Worked perfectly with WP 4.2.2, Genesis Metro Pro, first time around! I love it when that happens.

Except there’s a 16-pixel-wide bottom padding on my header area I can’t get rid of. I’m using Design Palette Pro to do color, padding, and other customizations, and the Header Area/General Header/General Header Padding settings are all zero. The bottom padding slider makes the bottom padding wider when moved to the right, but when moved all the way to the left to zero, leaves the big purple band you see here on my devsite: http://www.friendlyaquaponics.com/devsite_july/ .

I’m a CSS noob, but do know how to edit one thing at a time to see what happens. I’ve tried every possible setting I could think of in style.css, with no results. It seems as if DPP is ineffectively or incorrectly overriding the settings in style.css, and I have no idea where DPP keeps those settings; I’ve examined my site via ftp and even after a Save in DPP can’t find a file with today’s date on it.

The CopyBlogger folks know less than I do about it: when I asked them how to put a full-width header image into the theme, they gave me three references for how to do it on outdated themes that didn’t have anything to do with current responsive themes. Fortunately, one of those sites had recently updated their post and they mentioned you and this post. So here I am, stuck in big fat purple padding land. Of course it’s nothing to do with you or your excellent free code, but I bet you know what’s happening.

I’d be happy to turn this into a paid job for you if it’s not a single, simple line of code somewhere I need to comment out or edit.

Our devsite went live last night; it’s now http://www.friendlyaquaponics.com/ that is stuck in big fat purple padding land. It was more important to have a mobile-friendly site than get the last little bit of design right; figured we could do that on the fly.

Looks good, Tim – I thought the border was part of the layout :). Metro has 16px margin on the bottom of site-title that is usually white and raises the logo above the nav bar; remove that and you should be all done..site-title {
margin-bottom: 0px;
}

Edit: Also meant to mention for you to update your actual site-title text.

THANK YOU! It worked! I had to take the original site-title code in the current Metro Pro theme:.site-title {
font-family: 'Oswald', sans-serif;
font-size: 48px;
line-height: 1;
margin: 0 0 16px;
text-transform: uppercase;
}

and remove the “margin” line, replacing it with what you suggested. And it worked. And, of course, like everything else that’s worked in my StudioPress themes and apps so far, it left a big mystery behind it: because, just for laughs, I reset it to the original and did a hard refresh to see the big purple bar. The page displays exactly the same: can’t get the offensive big purple padding back now. I haven’t reinstalled CloudFlare yet, so the pages aren’t cached in some remote CDN server, and I deleted WP Super Cache’s cache, so this should be the real thing.

I used to deal with this sort of thing in the ’90’s when I was an authorized AutoCAD dealer; I’d run into a thorny tech issue, then finally, when I got one of the geeks who coded it on the phone, he’d say “yeah, that’s one of our undocumented features. Here’s how it works:…”. And I would go fix the customer’s problem then.

I am just curious. This implies additional settings present in WP, the theme, Genesis parent theme, DPP, or some kind of interplay of settings between these four (that maybe even the coders don’t know about or understand), but I’d sure like to know more about the guts of the beast. I wasted a lot of time on this one, and with StudioPress tech support. They’re nice, though. Aloha, Tim………..

“so this should be the real thing” … except that everyone else can see it (as I can) 🙂 Just use margin: 0px; and you should be fine. Adding in DPP may complicate things, but it’s reputable, well-tested and supported so you should be alright here.

I figured out my confusion, and why the “except everyone else can see it, including me”: when I made the change in style.css the first time, for some reason it echoed onto the page right away. Subsequently, it produced no purple bar when edited back to the original (my stupid curiosity), but then did “go back” later to the purple bar; what you and everyone else saw.

But I thought I’d covered all the bases: I’d cleared WP Supercache’s cache, gone to CloudFlare and purged those individual pages (style.css and functions.php, and gotten a confirm msg back), then gone to the browser and purged the browser cache, only to find the same thing: the purple band you saw all day Thursday. So I changed it again Thursday night back to your code. Purged WP SuperCache, purged style.css and functions.php in CF, and purple bar was still there. Waited about three hours, checking about every fifteen minutes, THEN it came back with no purple bar.

Apparently CF has some undocumented features, and even when you think you’ve purged some files (css and php in this instance, I don’t know how it picks), the files are on an approximately 3-hour refresh cycle and the purge doesn’t get them.

FWIW, if DPP doesn’t do exactly what you want it to do, and you need to edit the settings directly, the customization settings file is wp-content/downloads/gppro/gppro-custom-1.css.

Aloha and thanks for all the feedback and tutoring. I owe you one, and if you or your family is ever out in Hawaii, call us. We’ll take you out on our sailboat and cook you some luau pig.

I’m using the Genesis Magazine Pro theme at luckfavors-dot-com and I applied your full-size header mods (#6) and the header image I’m using (1140 x 250) works fine now and is responsive, but the secondary menu (which I’m using as my main menu) , top blog post, and right sidebar are all displaying over the top of the header image, like they are still using the old default 380×90 header size to position themselves. Not sure what to edit to get these to move down or adjust to the responsive header image automatically. Thanks for any help you can give me.

Thanks for trying the exercise – your result is not expected. The HTML output looks correct, as does the CSS from the exercise (could be placed before the media queries). Your URLs are unusual, including ‘index.php’. First try re-saving your permalinks or solving that, then go back over the steps or, better, go to your backup and carefully repeat the steps. (For Magazine Pro, it may go better with this tutorial + CSS; just skip step #5. ) Deactivate all plugins. Make sure you’ve deleted or commented out the PHP code in the first part of the exercise. Make sure Genesis Theme Setting > Header is “dynamic text”.

Thanks for responding. Not sure what you mean about the URLs being unusual, so I don’t really know what to do about it. I re-saved my permalinks and redid the entire exercise from my backups but I still get the same result. Then I started with my backup files again and followed the Magazine Pro tutorial that you suggested (using the same header image) skipping step 5 and now I’m getting no header image display. Tried it with a shorter header image and it’s still not displaying anything. Stumped.

Your URLs include “index.php” (example: “sitename.com/index.php/get-started/”) That’s unusual and should be addressed if unintended, whether or not it impacts your logo/header image setup. One other improvement would be to make your logo image only 1140 px wide, not 1600px – but that is not what is causing the image to not display. Using your existing image in a new setup of Magazine with either tutorial ‘just works’ in my testing, so there is something unique or wrong with your installation, server or other setup. Unfortunately, I can’t really help you troubleshoot beyond suggesting a clean installation with no plugins. You might check if Siteground has must-use plugins that conflict, but that would be a looong shot. Another excellent tutorial for header images is here; it would be interesting to know if that works or fails for your existing installation.

The only issue I am having now is updating the background image on Metro Pro. It appears by using this code, my ability to update them in the customization window has disappeared. Can you help with this? Not sure if i can do another TLP transfer, would just need to know what to name the file at that point.

Love the idea of being able to have my logo full width with the menu as a boarder. So, when I came across your tutorial I was thrilled; it shows exactly what I had in mind. However, I am having trouble making it work. I am using Lifestyle Pro. Being a super-newbie at the whole coding thing, I am obviously doing something wrong. Help! 🙂

I tried this on a Enterprise Pro theme that I customized and it works wonderfully, the only thing is that when the screen becomes smaller than about 768px the text becomes too little for my liking and I would like to use for screens smaller than that a different design with bigger fonts and the red background should be a smaller height.

Hi Iris,
Image swap schemes typically use javascript or CSS to conditionally change background images. These won’t work with inline images used in this header customization method. You could try cropping your transparent logo to remove background area (effectively making it larger for the header) and tweaking the CSS for placement, padding and margins on desktop view and through media queries. For the same reason you could try a plugin for retina images & devies to handle this for your header image.

Hi there, it worked great. But I wanted to switch the color of the site-containter to a dark color and I noticed a white border on the bottom and right of the header. How would I be able to fix that and unrelated but maybe you would know. I want to change the content area to a darker color and make that site container transparent so that the background shows through. Any suggestions thanks!

Hi Deanna,
You’ve specified in the code: http://thelivefitgirls.com/wp-content/themes/metro-pro/images/Logo.png
But the file is actually here: http://thelivefitgirls.com/wp-content/uploads/2016/01/Logo.png

You would need to specify the file differently than you have here. It’s easiest to place the image in the images folder (with the original code). Or you could change line 13 from the functions.php section of the tutorial to

Hey, Tom. I am trying to change the code to get responsive header in EXECUTIVE PRO. Followed the instructions closely, but I am getting a broken image. My image is named correctly, I think, and uploaded to the media gallery. Would love your help. Just can’t figure it out? Aaargh!!!!
Probably should not have screwed with the code, but header didn’t look right out of box.
Thanks so much!
Susan

I tried this but the header image menu button in customize disappeared and the option to customise the header from the main wordpress appearance menu. Where would I upload the image if there is no longer a place to upload? What I really want to do is increase my logo size a bit from the standard size give of 220 x 100. Do you have any tutorials on how to do this in Executive Pro?

Hi David,
Assuming that you are following “Option 6”, make sure that your PHP code is pointing properly to the file in the ‘images’ folder, specifically “http://actionnottheory.com/wp-content/themes/metro-pro/images/logo.png”. Your logo file, at 448KB, could be optimized down to a 70KB JPG.

I followed the instructions in Option 6 a few weeks back and all was working perfectly. This evening I had problems getting into the back-end of my site, which Bluehost believed was related to Genesis, so they had me uninstall/reinstall the framework and theme (Executive Pro). Everything on my fine is working fine again EXCEPT the header. It seems all the modifications I made to the code are still there, but the header is just blank. I’m at a loss for what to try next! Any suggestions?

Tom, great information, thanks! I’ve been struggling with this but have finally gotten it to work nearly to my ideal. My header is responsive and appears in its entirety, but is bordered by a larger, theme-colored box: researchteacher.com

I’d like for my header to be the same dimensions as this box. I replaced the logo.png file in my images folder with a larger header (1140×200 instead of 1080×120) but I’m still seeing the older header on my site. Can you tell me what I might be doing wrong?

Tom,
Thank you so much for posting this. I, too was struggling with getting a responsive header and your method worked. One clue that helped me at the end was Liz’s comment just a couple posters above where she had to deleted the .title-width code.

For me, I had to edit the following with a new max-width to cover the 1280 x 340 header image I created:
.header-image .title-area {
margin: 0 auto;
max-width: 1280px; /* originally: 300px */
padding: 0;
}

And it nicely adjusts at all the breakpoints, just like you said. SUPER!

I’m using Metro Pro. I followed the instructions in Option 6 & on my desktop it works perfectly. If you grab the edge of the browser window & make it smaller, the logo changes to the small image. But on my Android mobile device, there the logo doesn’t display at all.

Hey Tom. I did the Option 6 and my header image can be displayed only when i am logged in on my blog or in the mobile version (both logged in and not logged in). When i am logged out, the header image cannot be displayed. What’s the problem?