Having looked at Show TwentyEleven header image only on home page, Replace Home with image link inside custom header menu and more, I don't see what I am trying to do.

We want to replace the header only on the home page, with a much taller image. FYI I am not the designer and we had an intern using a lot of plugins to modify sidebars and build pages, so that's not me LOL. I prefer code-based solutions, not plugins.

QUESTION IS: I have this code in the Genesis child theme (Outreach Pro, also beyond my control) front-page.php:

/**  added by jim 6/28/19 per /
     remove header on front page (this file) from   */
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );

This successfully suppressed the header, but now it seems like I can't use after_header type code to place my image. Instead I am trying to use a ::before on the nav menu in css like this:

/** jim's customizations July 2019 for tall Bob Gray image replacing header on home page only */
.nav-primary:before {
 content:url(/images/robert-c-gray-banner-maskbob-sharpen.jpg);
padding−right:6px;
}

But it's not showing up and the Inspector doesn't show it either.

Is the ::before on the nav-primary selector a good approach? (I got the idea here.) FWIW I will need to float some text over this image as well.

Thanks for any guidance. Here's the page I am working on (test page) and here's what another page looks like with the header. Any suggestions to improve the question are quite welcome!

Having looked at Show TwentyEleven header image only on home page, Replace Home with image link inside custom header menu and more, I don't see what I am trying to do.

We want to replace the header only on the home page, with a much taller image. FYI I am not the designer and we had an intern using a lot of plugins to modify sidebars and build pages, so that's not me LOL. I prefer code-based solutions, not plugins.

QUESTION IS: I have this code in the Genesis child theme (Outreach Pro, also beyond my control) front-page.php:

/**  added by jim 6/28/19 per https://wpsites/web-design/remove-header/
     remove header on front page (this file) from   */
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );

This successfully suppressed the header, but now it seems like I can't use after_header type code to place my image. Instead I am trying to use a ::before on the nav menu in css like this:

/** jim's customizations July 2019 for tall Bob Gray image replacing header on home page only */
.nav-primary:before {
 content:url(/images/robert-c-gray-banner-maskbob-sharpen.jpg);
padding−right:6px;
}

But it's not showing up and the Inspector doesn't show it either.

Is the ::before on the nav-primary selector a good approach? (I got the idea here.) FWIW I will need to float some text over this image as well.

Thanks for any guidance. Here's the page I am working on (test page) and here's what another page looks like with the header. Any suggestions to improve the question are quite welcome!

• php
• css
• genesis-theme-framework
• header-image

• I just set up the short links (using Blink) at the bottom of the question, they work for me, if not for you I'll post actual links – JimLohse Commented Jun 29, 2019 at 15:03
• I see with the Genesis Visual Hook Guide plugin there is a genesis_before hook, I am gonna try that one instead of the CSS approach. – JimLohse Commented Jun 29, 2019 at 16:50

2 Answers 2

Well I got it working with a different approach but a good answer that provides insight why the approach in my question didn't work will be accepted as the answer.

I put this in functions.php for the child theme:

add_action( 'genesis_before_header', 'bob_gray_image', 10 );

function bob_gray_image() {
    if ( is_front_page() ) {
        echo('<div class="bobgrayimage"><img src="/images/robert-c-gray-banner-maskbob-sharpen.jpg"></div>'); 
    }
}

It's quite possible that your path url(/images/robert-c-gray-banner-maskbob-sharpen.jpg) is not correct. Because you mentioned a backslash url("/"images/.....); You shouldn't use / at first of your url. Try this code, I am sure it will fix that. url(images/robert-c-gray-banner-maskbob-sharpen.jpg)