Fixed shrinking header in Modern Portfolio Pro with fix for hash links offset

In Genesis Slack chat a user asks:

is there a way to get Modern Portfolio to work like a One Pager? The nav isn't sticky on there.

I need it to stick so the navigation will work more like a one pager. Click a menu item and scroll into one of the areas.

In this tutorial I share the code to make the site header fixed and shrink it on scroll for screen widths higher than 600px (when the hamburger mobile menu kicks in) in Modern Portfolio Pro. Additionally we shall add an offset to account for the fixed (and shrunk) header when initializing localScroll for smooth scrolling to in-page anchor links.

Step 1

Add the following in js/responsive-menu.js before the ending });