How to add a button to Primary navigation that opens full screen widget area in Genesis

In the past, I wrote about Infinity Pro's Offscreen widget area in any Genesis child theme.

In this tutorial, we shall adapt Infinity Pro's Offscreen widget area in News Pro.

We are going to add a font icon button at the end of Primary navigation's menu which when clicked will open the widget(s) in a custom "Offscreen Content" widget area in a full screen modal.

Screenshots:

When clicked:

Clicking on the x at the top right will close the modal.

Screencast:

While the tutorial has been written for News Pro 3.2.2, it should work with a few adjustments in any Genesis theme

Step 1

Edit js/global.js.

Below

$( '.content, .sidebar' ).matchHeight({
    property: 'min-height'
});

add