A user wrote in the members-only forum:
I’m using the Dynamik Theme and having been trying all day to use this to try and figure out how to get a full screen image (that fits the viewport size) to work on my site. I’d also like to add in the scroll arrow and the fade scroll effect just like in the tutorial.
The tutorial she is talking about is Medium-like Full View Featured Image in Genesis.
In this article I show how
- Primary Navigation can be relocated from below the Header to the right of Header (in place of Header Right widget area)
- A custom Home Featured widget area can be set to be as tall as the visitor's viewport
- Backstretch can be used to display an image fully stretched as the background for this Home Featured section
- genesis_attr filter can be used to add 'site-inner' ID to .site-inner.
- jQuery can be used for adding a down arrow which when clicked takes the user to #site-inner (below the Home Featured section) with smooth scrolling, fade out fixed Header after the visitor scrolls down 75px from the top, fade out the content of Home Featured section upon scrolling down.
in Dynamik.
Step 1
Upload your desired Home Featured background image at Genesis > Dynamik Design > Images.
Step 2
Create a file named say, front-page-scripts.js in wp-content/js having the following:
