How to replace sticky message widget with a navigation menu in Modern Studio Pro

A user in my Facebook group asked:

Can you post a tutorial on how to create the fixed menu on this site - http://lovetaza.com/ on the Modern Studio Pro theme?

In Modern Studio Pro widgets placed in Sticky Message widget area appear when scrolling down and fade away when scrolled to the top. In this tutorial I share the steps for replacing this widget area with a custom menu. We shall add a new Fixed Navigation Menu theme location and set this up such that any menu assigned to this location will appear in place of the Sticky Message.

Screencast:

Screenshots:

Default look (on page load):

Upon scrolling down:

iPad (Landscape):

iPad (Portrait) and below:

when the hamburger menu icon is tapped:

Step 1

Edit functions.php.

Replace