
You need to set a scroll section on every page where this nav will be used to trigger the scroll transform.
This is done by assigning a scroll section ID to a desired element and then selecting it in the Scroll Variant setting as a trigger with adequate Viewport and Variant selected. Best way I've found is to have the hero section span 100vh and use the next section following after hero as a trigger. This ensures consistency on every page.

To make everything work smoothly, you need default and scroll variants for both desktop and mobile closed AND mobile open instances.