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;
}