Fixed shrinking header in Workstation Pro

In this tutorial I share the steps for making site header in Workstation Pro fixed and reducing its height with a smooth animation as the user scrolls down. Scrolling back to the top of the site will animate the header back to its original height. We shall limit this behavior to screen widths > 880px, the media query when the navigation collapses to a mobile menu in this theme.

Step 1

Create a file named say, global.js in Workstation Pro's js directory having this code: