Modern Blogger Pro updated header

Last year, when Modern Blogger Pro was released, there was no header upload function. This allowed the user to add in two images via CSS to add a logo for desktop viewing, and a larger image which was designed for viewing on a retina screen (and mobile device).

A lot of support questions were about changing the logo to a full width header, so Lindsey created a tutorial on adding a full width header. You can read it here.

In September, following a lot of feedback from users, Lindsey updated Modern Blogger Pro to provide additional functionality. One of those additions was a header upload through the Dashboard. This meant that a user could add their logo to their site without needing to know any CSS. The logo was designed to be mobile responsive and retina ready, by displaying at 50% of the size uploaded.

This works well by default, but we still have users asking for a full width header. The recommendation is to upload the logo through the dashboard, and use a full-width background image, so Lindsey wrote an updated full width header tutorial, which you can find here.

What if you don’t have a background image and a small logo? If you want to create a header image which will display at a larger size on a desktop, and smaller on a mobile device, then you will need to adjust the size of the custom header upload in your functions.php file, and your stylesheet, OR you can revert to the functionality of the original Modern Blogger Pro.  This tutorial will walk you through that.

1. Create multiple header/logo images.

You will need a retina ready image (LogoX2 – 2296 x 400), a desktop image (Logo.png – 1148 x 200px), and a mobile ready image* (LogoX3 – 640 x 328). I added the three images to my theme’s images folder, but you may prefer to upload your header images to your media library, in which case, you will need to make note of the URL of each of your images.

2. Open up your functions.php file, and remove this:

//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘width’ => 720,
‘height’ => 328,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false,
) );

3. Then, open up your stylesheet, and replace this section:

/* Logo, hide text */

.header-image .site-header .wrap {
padding: 0;
}

.header-image .site-title > a {
background-size: contain !important;
display: block;
float: left;
height: 164px;
margin-left: 10px;
width: 360px;
text-indent: -9999px;
}

with this:

/* Logo, hide text */

.header-image .site-header .wrap {
background: url(images/Logo.png) no-repeat center;
padding: 0;
}

.header-image .site-title a {
float: left;
min-height: 200px;
width: 100%;
}

with (images/Logo.png) being the URL of your desktop header image.

4. In your media queries, add this:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

.header-image .site-header .wrap {
background: url(images/LogoX2.png) no-repeat center;
background-size: 1148px 200px;
}
}

(The background-size to equal 50% of the size of the header image you are loading; this is how your header remains retina ready).

5. Next, you will need to add the appropriate size images for mobile viewing.

A note here: Mobile Device sizes are constantly changing; if you add code for a specific mobile device size, and a new device comes out, your header may not be responsive. For example, the iPhone 6 was recently introduced, and that has screen sizes between the size of the iPad, and the old iPhone 5. You can drive yourself crazy if you try to keep up with constantly changing device sizes. My recommendation is to display a smallish image (290px wide) on all mobile device sizes below the size of the iPad; that way, you won’t have to keep updating your code, or add in numberous image sizes! But, if you want to continue, Here are some of the more common media sizes:

@media only screen and (max-width: 1024px) {
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 480px) {
@media only screen and (max-width: 320px) {
@media only screen and (max-width: 240px) {

For the purposes of this exercise, I’ve added in coding for an iPad and in iPhone.

Here’s my code for the iPad:

@media only screen and (max-width: 768px) {
.header-image .site-header .wrap {
background: url(images/LogoX2.png) no-repeat center;
background-size: 768px auto;
}

.header-image .site-title a {
min-height: 134px !important;
}
}

6. For an iPhone (portrait, 320px wide), I added in this section, using LogoX3.png

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

.header-image .site-header .wrap {
background: url(images/LogoX3.png) no-repeat center;
background-size: 320px auto;
}

.header-image .site-title a {
min-height: 164px !important;
}
}

7. Now, go to Dashboard > Genesis > Theme Settings > Header > select “Image logo” from the drop-down next to Use for site title/logo:

You can see my demo site with this larger header added by clicking on this link.

Another Note: We do not provide theme support for customizing your header using anything other than the theme’s default header size; this tutorial is an example of the type of customization that you can do with your theme.

For the purposes of the tutorial, each of my header images was a different color, so you could see which device uses which image.

Here’s the retina ready header, as seen on my MacBook Pro:

and here’s the header on my iPhone:

 

Have you purchased the Modern Blogger Pro theme, or any of the other Pretty Darn Cute Design themes, and would like to hire me to adjust your theme to add multiple headers for your site? If so, I can help you with this. Shoot me a note!