• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Hero Image Behind Site Header & Menu With Text Overlay In Genesis Sample Theme

This download folder contains 3 files which enable you to add a full width hero image behind your site header which also contains your menu like this :

Genesis Sample Theme Hero Image Behind Site Header

The hero is only activated once the hero widget is populated.

By default, the same image displays across all page types however you can add a unique image to any single post/page using WordPress custom fields and/or ACF fields.

Any content you add to the Hero widget area floats over your hero image.

Demo Video #

Shows the default hero image displaying behind the site header and the unique hero image, added using a ACF image field displaying when added. Shows the site header background color changing from transparent to white on scroll.

You can change the default hero image using customize > Hero Image.

Installation Steps #

There’s 4 steps :

Step 1 – Upload the hero.js file to your Genesis Sample themes root directory.

Step 2 –
Copy & paste the PHP code to the end of the Genesis Sample themes functions.php file.

Step 3 – Copy & paste the CSS to the end of the Genesis Sample themes style.css file and clear caching.

Step 4 – Add a widget with your content to Appearance > Widgets > Hero Text. Without this widget area active, the code will NOT execute. Also, your image will not display unless you add it via customize > Hero Image.

Download Folder

Optional – Unique Hero Images

If you want to display unique images on single posts and pages, install the Advanced Custom Fields plugin and import the acf.json file using Custom Fields > Tools > Import File as seen in this screenshot :

ACF Import File

Related Tutorials

  • Hero Image Behind Site Header & Menu With Unique Text Overlay In Genesis Sample Theme
  • Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme

After Header Image Custom Fields Customizer Header Image jQuery Scroll

Reader Interactions

Comments

  1. Stephanie Elie says

    June 11, 2020 at 2:54 am

    Hi Brad,
    One more question. Is it possible to customize the text for each page as well?

    Log in to Reply
    • Brad Dalton says

      June 11, 2020 at 3:26 am

      If you want to display unique text on each page, this can be done using custom fields however it would require modification of the code as presently, it supports content from 1 widget area.

      Log in to Reply
      • Stephanie Elie says

        June 11, 2020 at 4:13 am

        Is that something you would be willing to do?

        Log in to Reply
        • Brad Dalton says

          June 11, 2020 at 4:21 am

          Sure can, please book a additional tutorial request and i’ll publish it for you. https://wpsites.net/terms-of-service/#additional-tutorial-requests

          Log in to Reply
        • Brad Dalton says

          June 12, 2020 at 12:09 am

          Try this https://wpsites.net/web-design/hero-image-behind-site-header-menu-with-unique-text-overlay-in-genesis-sample-theme/

          Log in to Reply
  2. Stephanie Elie says

    May 29, 2020 at 5:52 pm

    Is there a way to get this to only show up on the homepage only?

    Log in to Reply
    • Brad Dalton says

      May 30, 2020 at 1:09 am

      Just published this for you https://wpsites.net/web-design/hero-image-behind-site-header-menu-on-front-page-in-genesis-sample-theme/

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.