Custom Header image not showing up at size I made it

[David Borrink]

First I changed the header sizes to the new sizes in functions.php:

//* Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 1280,
'height' => 340,
'header-selector' => '.site-title a',
'header-text' => false,
'flex-height' => true,
) );

I uploaded a 1280x340 header graphic and set it in Appearance > Customize > Headers. The recommended size on that page mentioned my 1280x340, but when I upload the graphic it shows up at 300 x 80 in my header, centered in the space. What am I doing wrong?

And to add to my confusion, all of a sudden I don't see the Theme Settings > Header area in my dashboard. I've checked four of my Genesis setups and they do not have the Header area anymore where you choose "Use for site title/logo". Did I miss something in the latest Genesis update?

I'm doing this on a MAMP setup, so no link is available.

[Victor Font]

You have to change the associated CSS as well. http://victorfont.com/change-logo-size-in-genesis-themes/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[David Borrink]

Thanks, Victor. I found that line in style.css and changed it to:

.header-image .site-title > a {
background-position: center !important;
background-size: contain !important;
float: left;
min-height: 340px;
width: 100%;
}

But it's still 300px wide. The container is 340px tall, but the graphic is still 80x300 floating in the center of the header area. I change "width: 100%" to "width: 1280px" and I get the full sized graphic at actual size, but it's 1/3 off the page to the right. I try "float: right" and it goes 1/3 off the page to the left. Not sure what to do here. I'm using Firebug and I'm not getting a clue why it's not positioning off to the left or right.

And so you know: I'm using Genesis-Sample for the base of my theme.

[David Borrink]

Correction, I'm using Firebug and I'm not getting a clue why it's positioning off to the left or right.

Ultimately I'm wanting my header to be responsive so it scales down automatically for any media width.

[David Borrink]

I was able to add "margin-left: -480px" to move the header into place. But the downside is that I get no responsiveness out of the logo, and the image stays 340px tall. This isn't going to work for mobile at all.

[David Borrink]

Okay, I discovered via another source that this code needed editing:

.header-image .title-area {
margin: 0 auto;
max-width: 1280px; /* originally: 300px */
padding: 0;
}

That takes care of things. I found this in a comment on a site that explained how to do a responsive header using a replacement of codes. I've gone in that direction, now.

[Author]

Posts