Reply To: How do I put a custom graphic .jpg logo image in the Legacy header

One of the major flaws of WordPress is that it is a PITA to make a header responsive. I’ve never figured out why WP has never fixed this to make it easier.

First of all there are two ways to get the logo graphic in the header… use the WP way where you have to make sure the logo is the exact size, OR disable the custom header in functions.php and use CSS via the background-image attribute to load your header. Google for Carrie Dill’s site as she has a good tutorial on all of this.

Now to make it responsive, the proper way is to use what is called an @media query. There are tons of tutorials on this as well. For the Legacy theme with HTML5 enabled I put the header in this way:

/*===========HEADER====================*/

.site-header {
height: 180px;
}

/* put the banner in the title-area instead of in the header class*/
.header-image .title-area {
background: url(http://www.xxxxx.com/wp-content/uploads/banner-logo.jpg) no-repeat;
height: 180px;
}

I then make another copy of my logo but this time only 380 px side and whatever height I want. I use a media query to make it responsive:

@media only screen and (max-width: 480px) {

.header-image .title-area {
background-image: url(http://www.xxxxx.com/wp-content/uploads/new-banner-320.jpg) !important;
background-repeat: no-repeat;
height: 51px;
min-height: 0px;
}
.site-header {
height: 51px;
}
}

There might be plugins available to to all of this. At one time Nick The Geek had a nice Genesis Responsive Header plugin but when HTML5 was rolled out he never updated it.

My guess is that you can use the media query when using the WordPress method of putting in a header so that may be easier for you. But I’ve found that disabling the WP header logic in functions.php and using my own CSS is less prone to problems.

Hope this helps a little bit. Yeah, it really IS a PITA to do a responsive header. Maybe use Chrome’s “inspect element” on this site and look at the custom.css I coded to maybe help you. http://www.sweetdreamsfactory.net/ Note, this may not be the best way to do it, but it works for me. Since Genesis rolled out HTML5 everything has gotten progressively harder. If you don’t have a good understanding of CSS and some of the stuff in functions.php, you are best advised to hire someone to do all of this for you.

Dev
NewMedia Website Design