Genesis Full Width Header Tutorial

Reading Time: ~ 3 minutes

Since the launch of Genesis 2.0, full width headers are no longer supported in most themes via an uploader, this is because responsive design is important and the uploader feature did not keep your image responsive. This tutorial will walk you through adding a full width header to your Genesis theme.

note:

When making changes to your stylesheet (CSS), or any theme file, you want to save a backup copy right before beginning so you have something to fall back on if you accidentally make a mistake. You can do this via FTP or you can simply copy and paste your CSS straight from your dashboard editor into a notepad/text editor document on your computer.

Let’s Get Started…

1. First you will want to create and size your header image to fit your theme. (For Modern Blogger Pro this will be 1148px by 223px for Jane 1140px by 196px)
2. Next, navigate to your Genesis Theme Settings page from your dashboard.
   Genesis >Theme Settings
3. From here, scroll down until you see the Header setting, and select “Image Logo” from the drop down then click “Save Settings”.
4. Upload your full width header image either via FTP to your theme’s images folder, or through your dashboard (Media >Add New) and grab the URL by clicking “edit” after it’s uploaded.
5. Now we add your image to your CSS. Click on Appearance and select Editor to find your CSS then look for this area:
   (command/control+f and search is the fastest way to find something)

/* Logo, hide text */

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

replace the existing image path with your new image path/url

/* Logo, hide text */

.header-image .site-header .wrap {
	background: url('http://yoursite.com/wp-content/uploads/2013/10/header.png') no-repeat left;
	padding: 0;
}

Modern Blogger Pro Specific Tweaks

If you are using Modern Blogger Pro this tutorial will place your image on top of the dots shown in the demo. If you would like to remove those just look for this area of your CSS:

.site-container {
	background: #fff url(images/hdot.png) repeat-x;
	border: 10px solid #fff;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	margin: 20px auto;
	max-width: 1168px;
}

and replace it with this:

.site-container {
        background: #fff;
	border: 10px solid #fff;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	margin: 20px auto;
	max-width: 1168px;
}

That’s it unless you want to keep it responsive for mobile devices. If so, read on..

Keep It Responsive – Advanced

Please note that if you have purchased either Modern Blogger Pro or Jane, the instructions for this are already in your setup tutorial area and the legwork is done for you so this is not necessary unless you want a full width header

In order to keep your new header responsive you will need to create various sized header images and add them to your CSS. Some pretty standard sizes are as follows:

240px
320px
480px
768px
1024px

I also highly recommend keeping these images retina ready by creating them at twice the size they will appear. For instance, your regular 1140px by 196px header image would need to be 2280px by 392px and you shrink it down using CSS. I’ve done this in Jane and Modern Blogger Pro for you, but if you choose to display a full width header you will want to follow these instructions. I’ll do one to get you started and show you how..

For a 768px size screen we want our image to be at least twice that size at 1536px wide. When you resize the original 2280px wide image to 1536px wide (I used photoshop), the height will automatically shrink to 264px. So the width in your css will be 768px and your height will be 132px. Make sense? Here is what your CSS will look like:

@media only screen and (max-width: 768px) {
	.header-image .site-header .wrap {
		background: url(http://yourimageurlhere.png) no-repeat left;
		background-size: 768px 132px;
	}