Genesis 2.0 Custom Header Problem & Fix

[CyBorge]

I hope this helps some of you solve your Genesis 2.0 custom header issues. If you have a better solution please comment.

My Issue:
When I upgraded one of my sites to Genesis 2.0 - The custom header feature messed up the look of my header by creating an inline style using the !important
Found here: /wp-content/themes/genesis/lib/structure AROUND LINE 783

$output .= sprintf( '%s { background: url(%s) no-repeat !important; }', $header_selector, esc_url( $header_image ) );

This line outputs the CSS bacground shortcut operator as an inline style with !important so it OVERRIDES your theme's CSS.

NOTE - The background shortcut operator allows for background positioning - which this line doesn't define but, because it uses the !important and is an inline style it was OVERRIDING my existing CSS background-position declaration in my theme's style.css (with the defaults of left top) despite the fact that I used !important on the declaration:

My CSS
#header{
background-position: center top !important;
}

My Solution - Added the code snippet below to my theme's functions.php so I could control the custom header's output and set the positioning I wanted:

/*---------- MDB - CUSTOMIZE HEADER OUTPUT --------------- */
remove_action( 'wp_head', 'genesis_custom_header_style' );

add_action( 'wp_head', 'mh_custom_header_style' );

function mh_custom_header_style() {

//* Do nothing if custom header not supported
if ( ! current_theme_supports( 'custom-header' ) )
return;

//* Do nothing if user specifies their own callback
if ( get_theme_support( 'custom-header', 'wp-head-callback' ) )
return;

$output = '';

$header_image = get_header_image();
$text_color = get_header_textcolor();

//* If no options set, don't waste the output. Do nothing.
if ( empty( $header_image ) && ! display_header_text() && $text_color === get_theme_support( 'custom-header', 'default-text-color' ) )
return;

$header_selector = get_theme_support( 'custom-header', 'header-selector' );
$title_selector = genesis_html5() ? '.custom-header .site-title' : '.custom-header #title';
$desc_selector = genesis_html5() ? '.custom-header .site-description' : '.custom-header #description';

//* Header selector fallback
if ( ! $header_selector )
$header_selector = genesis_html5() ? '.custom-header .site-header' : '.custom-header #header';

//* Header image CSS, if exists
if ( $header_image )
$output .= sprintf( '%s { background: url(%s) no-repeat center top !important; }', $header_selector, esc_url( $header_image ) );

//* Header text color CSS, if showing text
if ( display_header_text() && $text_color !== get_theme_support( 'custom-header', 'default-text-color' ) )
$output .= sprintf( '%2$s a, %2$s a:hover, %3$s { color: #%1$s !important; }', esc_html( $text_color ), esc_html( $title_selector ), esc_html( $desc_selector ) );

if ( $output )
printf( '<style type="text/css">%s</style>' . "\n", $output );

} /*------------ END HEADER FIX MDB ----------------------------------*/

[IdleBuzz]

Thanks for taking the time to post this CyBorge, but when I added your fix to my functions.php file, it locked me out of the site completely with a "server error", including blocking the main url to visitors.

I have the same issue as you, my header is thrown to the left of the window now and Genesis 2.0 is ignoring my css styling to have it as follows:

#header {
background-size: contain !important;
}

#header {
background-position: center !important;
}

Does anyone else have a potential solution? Or is there some way I can alter what you have provided CyBorge?

Thanks!

[mcgratk]

Yes, thank you CyBorge. I'm having the same issue. Any advice is greatly appreciated!

[Robin]

After changing my CSS and functions.php to HTML 5, mine did the same thing. my header was all the way to the left and the menu nav bar was pulled up.

I cleared my cache and it was fine. Hope this will work for you as well.

Robin

[wendycholbi]

I think the problems that IdleBuzz and mcgratk are having may be caused by pasting in code that has curly quotes.

I created a gist of CyBorge's code, with the curly quotes replaced with straight quotes, here:

https://gist.github.com/wendycholbi/6276778

...and a separate one for anyone using the Prose theme (because the Custom Functions field in Prose was modifying the output and printing a single character at the top of the site) here:

https://gist.github.com/wendycholbi/6276816

I can verify that my Prose variation is working (my example site, using this function, is http://style3.sitesetupkit.com/ ), and CyBorge's code worked for me too, once I fixed the curly/straight issue.

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[IdleBuzz]

Thanks wendycholbi! I appreciate the help 🙂 Now, do you have a suggestion for the mis-aligning of the menu now as well? Mine has zoomed all the way to the left of the page, instead of staying within the theme content parameters...

I was sorely disappointed to see the latest genesis update not include anything for either of these issues, that are clearly affecting quite a few users...

[Author]

Posts