Xtreme Version 3 added two ways to fix Menus at the top of the page.
A simple Fixed to Top that fixes the menu there all the time.
A Fixed to Top on Scroll, that will fix the menu when you scroll the page and the menu reaches the top of the browser.
 
This Tutorial explains how to create different animated transitions when the menu gets fixed, as well as how to unfix it on mobile devices.
 

Animated Transitions

By default, the “Fixed to top on Scroll” is a simple stick when the menu gets there.
If you want, you can easily change the transition between not fixed to fixed with a few simple Custom CSS Rules, placed in the Global Custom CSS Rule box
 
Generally, if you want to create an animated transition between the aspect of the menu when not fixed, and when fixed at the top, you will need two rules
The first rule will use the selector .wvrx-menu-container to define the transition for the properties that will be animated and eventually its starting state.
The second rule will use the selector .wvrx-menu-container.wvrx-fixonscroll to define the change in property when the menu gets fixed

 
Morph Effect on Fix

For example, if you want the menu bar to have its background change to a different semi transparent color, and its size grow, you would use

/* Rule to set the transition speed for both background and padding */
.wvrx-menu-container {
transition: background-color .5s ease, padding .5s ease;
}

/* Rule to change the background color and padding once the menu is fixed */
.wvrx-menu-container.wvrx-fixonscroll {
background-color:rgba(100,200,200,.8);
padding-top:10px;padding-bottom:10px;
}

 
Drop on Fix

If you want a drop on scroll, where the menu bar appears to drop from the top into its fixed position, you only need to use a single rule, because the animated position is the top property, and that already has an end value (at the top).
So in this case you just define the transition speed and the start position with the rules below.

/* Rule to define speed and start top property */
.wvrx-menu-container {transition:top .3s ease;top:-40px;}

 
Hide / Unhide Logo
if you have a logo on the menu bar, using for example the Custom Logo, you may want to reveal / hide the logo or change its size when the menu bar is fixed.
You can use the wvrx-fixonscroll class for that as shown in the example rules below for a custom logo on the primary menu bar.
First rules reveals the logo when the menu is fixed, the second just changes its size.

/* Hide Custom Logo when fixed */
#nav-primary .custom-logo-on-menu {display:none !important;}
#nav-primary .wvrx-fixonscroll .custom-logo-on-menu {display:block !important;}

/* Change size of custom logo when fixed */
#nav-primary .wvrx-fixonscroll .custom-logo-on-menu img {height:50%;}

 
Specialised rules

If you need to restrict these rules to a specific menu bar, or if you want a different transition for each menu, add the menu selector in front of the rules
For example, assuming you have set both menu bars to be “Fixed to top on Scroll”, the rules below will drop the secondary menu bar, and morph the primary one

/* Secondary Menu transition rule */
#nav-secondary .wvrx-menu-container {
transition:top .3s ease;top:-40px;
}

/* Primary Menu transition rules */
#nav-primary .wvrx-menu-container {
transition: background-color .5s ease, padding .5s ease;
}
#nav-primary .wvrx-menu-container.wvrx-fixonscroll {
background-color:rgba(100,200,200,.8);
padding-top:10px;padding-bottom:10px;
}

 

Unfixing on Mobile

To unfix ALL Fixed Top Elements on Phones (including Fixed to Top & Fixed to Top on Scroll Menus), use

.is-phone .wvrx-fixedtop, .is-phone .wvrx-fixonscroll {
z-index:998;
position:relative !important;
top:auto !important;
}
body.is-phone {margin-top:0px !important}

If you want to unfix on both Phones and Small Tablets, use .is-mobile in place of .is-phone
 
If you have more than one Fixed top element and need to unfix only some of them, it will be more complicated, and require to inspect the page with the browser developer tool

Example -1:
If you have a Fixed top HTML insertion Area, a Fixed Header Widget Area and a Fixed Menu bar, unfixing just the Header Widget Area Will require to specialize the first rule with the Header Widget Area selector.
You will also need to find out the height of the remaining fixed elements to use in the margin-top property of the second rule below (XXX)

.is-phone #header-widget-area.wvrx-fixedtop {
z-index:998;
position:relative !important;
top:auto !important;
}
body.is-phone {margin-top:XXXpx !important}

 
But if you are mixing Fixed Top areas and “Fix to Top on Scroll” Menus, unfixing just some of them could be even more complicated, and you should seek help on The Support Forum to see if possible and how.