Sticky site header having before site header widget section in Genesis

This tutorial provides the steps to create a sticky site header having before site header widget section in the Genesis Framework.

The above site header widget section hide when scrolled. One can move This section to nav primary in the smaller screen.

Tested on Genesis Sample 2.6.0+

What we are going to do?

1. Add a js no-js check and classes
2. Add structural wraps for before site header
3. Create and register the widget area for the above site header
4. JS and CSS for sticky header effect

STEP 1

Add some classes and a js no-js check using this in functions.php