Replace header with large image on home page only, using Genesis child theme

Question

Replace header with large image on home page only, using Genesis child theme

JimLohse

2019年9月1日 17:32

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.net/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!

Topic header-image php genesis-theme-framework css Wordpress

Category Web

Bapi · Accepted Answer · 2019年9月1日 17:32

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)

JimLohse · Accepted Answer · 2019年6月29日 18:58

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>'); 
    }
}

Replace header with large image on home page only, using Genesis child theme

About