This members-only tutorial provides the steps to add a hero section on the homepage with a transparent site header overlay with the header and logo shrinking when scrolling down.
We shall
- register
home-herowidget area - set transparent background for the site header
- set hero image as background covering both the site header and hero section
- set site header and the logo to shrink upon scrolling down
- invert the nav menu item colors in
scrolled state - use a different logo image in
scrolled state
in Genesis Sample.
Tested in Genesis Sample 2.10.0 and Genesis 2.10.1.
Step 1
Let us
- register
home-herowidget area - add
.my-header's opening div tag output home-herowidget area and add.my-header's closing div tag.
Add the following at the end of Genesis Samples functions.php:
