Oxygen Mobile Menu Customizations

This tutorial provides the CSS code to set auto height for the mobile menu (vs the default full screen) in Oxygen.

Add this CSS:

/* Mobile Nav */
@media only screen and (max-width: 768px) {
body {
position: relative;
}
.admin-bar .oxy-menu-toggle {
top: 66px;
}
.oxy-nav-menu {
transition: all 0.35s ease;
}
.oxy-nav-menu.oxy-nav-menu-open {
display: block;
bottom: auto;
background-color: #fafafa;
border-bottom: 1px solid #ddd;
}
.oxy-nav-menu.oxy-nav-menu-open .oxy-nav-menu-list .menu-item a {
justify-content: flex-start;
}
.oxy-nav-menu.oxy-nav-menu-open.oxy-nav-menu-responsive-dropdowns .menu-item .sub-menu {
padding-left: 20px;
}
.oxy-nav-menu.oxy-nav-menu-open .sub-menu .menu-item a {
padding-top: 0 !important;
}
}

Change 768px to the width at which your regular nav collapses into a mobile menu.

Bonus:

If you want the hamburger menu icon to be fixed and always be visible, add the following additionally inside your media query (768px in the above example):

.oxy-menu-toggle {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
border: 1px solid #6799b2;
border-radius: 2px;
background-color: #fff;
}
.oxy-nav-menu-open .oxy-menu-toggle {
position: static;
border: none;
padding: 0;
}
.oxy-header-wrapper {
position: static;
}
.oxy-header-container,
.oxy-nav-menu-prevent-overflow {
height: auto;
}