How to Slide Toggle Primary Navigation in Altitude Pro

This tutorial is about getting Slide Toggle Primary Navigation Menu in Genesis by clicking an icon to work in Altitude Pro.

Live Demo

Applying my previous tutorial to Altitude Pro is tricky due to the following reasons:

1. Header Right is unregistered
2. Primary Navigation is relocated to Header
3. Fixed Header

Here's the plan of action:

1. Get Header Right widget area back
2. Remove Primary Nav from Header
3. Add Primary Nav above Header
4. Wrap the Primary Nav and the Header in a custom div.nav-header-wrap and make this div fixed
5. Remove the dark class from .site-header upon scrolling down and add it instead to .nav-header-wrap
6. Delete the mobile responsive jQuery code built into the theme (which is set to trigger at 800px)
7. Set span.menu-toggle (to be placed in a text widget in Header Right widget area) to slideToggle Primary Nav

Step 1

Edit functions.php.

Comment out or delete