Genesis Sample Theme – Full Width Header Image

[Genesis]

Hi,

I tried following this website to make my header full width:

Add Header Image Logo To Genesis 2.0 Sample Theme

But as soon as I add the following code listed, my header image disappear and instead only text displayed with greater height.

add_theme_support( 'custom-header', array(
	'default-text-color'     => 'ffffff',
	'height'                 => 164,
	'width'                  => 1600,
) );

Can someone please guide one how can I make my header image full width?

Thanks!

P/S: Still developing offline, no URL.

[Marcy]

That tutorial discusses two ways to add a logo to the Genesis Sample.

1. The first part of the tutorial:
If you want to use a background image, then you need to use:
/* Logo, hide text */
.header-image .site-header .wrap {
background: url(images/logo.png) no-repeat left;
padding: 0;
}
And then name your logo, logo.png and add it to the /images folder.

2. For the second part of the tutorial, it adds a custom upload of the header image in your WordPress under Appearance > Header.
So you add the code to your functions.php

add_theme_support( 'custom-header', array(
	'default-text-color'     => 'ffffff',
	'header-selector'        => '.header-image .site-header .wrap',
	'height'                 => 164,
	'width'                  => 320,
) );

and then login to WordPress and upload the logo under Appearance > Header

---

Marcy | Amethyst Website Design | Twitter

[Genesis]

I tried the second one by adding height: 320 and width 2520 but both left and right side is still white background. Any ideas?

[Marcy]

It would be a bit easier to help, if you provided a link to your site. But here goes...

Find this selector in your style.css:
.site-header .wrap {
padding: 40px 0;
padding: 4rem 0;
}
and add max-width: 100%; to it, so it looks like:

.site-header .wrap {
	padding: 40px 0;
	padding: 4rem 0;
        max-width: 100%; 
}

And then you may want to change this section (change left to center) so that it centers the header:

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

---

Marcy | Amethyst Website Design | Twitter

[Genesis]

Hi Marcy,

Many thanks!

Now, I'm able to view it right in the browser.

There's one problem left though. When resizing the browser, it header can be viewed on the center part.

Here's the screenshot of different sizes of browser:

Full Screen:
50% Screen:
Smallest Screen:

Is there any way that I can make the entire header viewable lihe slider does?

Thanks!

[Marcy]

Again I can't really help without a link to your site. There are no links to your images, so I'm guessing again.

You need to add a contain or cover properties to your image size to see which you like best, but since your image is so large, I'm not sure how that's really going to work for you. It may be best to actually size the image yourself for different screen sizes and add that to you @media query sections.

To add cover or contain properties, you have to write the entire background image CSS on separate line to do it, so you would now have:
.header-image .site-header .wrap {
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: center top;
background-size: contain; /* or you can try background-size: cover; instead */
padding: 0;
}

---

Marcy | Amethyst Website Design | Twitter

[Genesis]

Hi Marcy,

Sorry that I don't have a link now as I'm doing it offline for now.

The code managed to put the image viewable in full-width but the part under it is having space when resize to smaller window:

This is smallest browser window. Link to the image: http://postimg.org/image/cqmegarqn/

This is the code following the header:

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

Thanks again! Appreciate! 🙂

[Marcy]

You need to add some extra @media sections at the bottom of style.css to reduce the height of the header. I don't know the height you need, so you will have to look at your site for different screen sizes yourself to see what height you need.

For instance

@media only screen and (max-width: 480px) {
.header-image .site-title a {
min-height: 100px;
}
}

@media only screen and (max-width: 320px) {
.header-image .site-title a {
min-height: 75px;
}
}

---

Marcy | Amethyst Website Design | Twitter

[Genesis]

@Marcy,

Thank you so much! I was able to get it done. 😉

[Marcy]

You're welcome! I'm glad it worked for you.

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts