Dropup menu in Oxygen

In the Oxygen’s Facebook group a user asked:

If you use the Pro Menu in a footer, how do you make the dropdown container to appear on top of the footer (like “drop-up instead of down)?

Adding the following CSS will make the submenus appear above the nav menu when using Pro Menu component in Oxygen:

#-pro-menu-59-10 .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) ul:not(.sub-menu) > li > .sub-menu {
  bottom: 100%;
  top: auto;
}

To reverse the small arrow direction from down pointing to up pointing go to Pro Menu / Desktop Dropdowns / Dropdown Icon and set it to chevron-up (Font Awesome) icon or you can reverse the Rotation and Open Rotation degree value.

If you would like to change the second level arrows from top pointing to right pointing, additionally add:

#-pro-menu-59-10 .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item .menu-item-has-children > a svg {
 transform: rotate(90deg);
}

Replace both instances of -pro-menu-59-10 with the ID of your Pro Menu component.

Update: Here’s a tip from André Babiak in Facebook:

One tip. You’ve gotta be careful which animation you choose. Because if you use anything going up (like slide up), it will create a horizontal gap of the height of the dropdown container under the footer. Took me a while to figure out where this white space under the footer came from.So it’s better to choose an animation without vertical up movement.