WP SITES

2661

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme

This tutorial enables you to add a hero image with overlaying content behind your site header and nav menu like this :

Tested using the latest version of the Genesis Sample child theme by StudioPress, this solution works with or without Gutenberg blocks on the home page.

Demo Video

Shows a full screen width image behind the site header and menu in the Genesis Sample theme. Shows the image can be changed using the Hero Image setting in the customizer. Displays HTML content from the Hero Text widget area.

Installation Steps

There’s 4 steps :

  1. # Upload the files named front-page.php and hero.js to the your theme folder like this :

    2.  

    Step 1

  2. # Copy & paste the PHP code from functions.php file to the end of your Genesis Sample themes functions file

    3.  

    Step 2

  3. # Copy & paste the CSS from the style.css file to the end of your themes style sheet and clear caching.

    4.  

    Step 3

  4. # From your WordPress Dashboard, go to Appearance > Widgets and copy the demo HTML for the hero text into a HTML widget in the Hero Text widget area.

    5.  

    Step 4

Once you’ve completed the steps, you can then add a image using the customizer or upload an image file named hero.jpg directly to your child themes images folder.

Download Folder

Related Tutorials

Reader Interactions

Comments

  1. ok! I will double check and make sure I did not mess up any code because it is not showing up transparent for me after uploading my logo

    • If you also want it transparent on scroll, add this CSS to the end of your style sheet and clear caching :

      @media only screen and (min-width: 960px) {

    .white .site-header {
        background-color: transparent!important;
    }

}

Leave a Reply