Better Bigcommerce vault free theme

use below CSS with below video guide

<style>
     
#menu .mega-cat-dropdown .has-subMenu.is-root + .navPage-subMenu-horizontal.second-level-flyout .page.inactive-page {
    position   : relative;
    display    : block;
    z-index    : 1 !important;

    height     : auto !important;
    margin-top : 0px !important;

    opacity    : 1 !important;

    transition : none;
}
header div#menu {
z-index: 9;
} 
.flyout-pagination-container.top.visible {
    display : none;
}

.mega-cat-dropdown li.navPages-item a.navPages-action {
    font-size : 14px !important;
}

.navUser-section .dropdown--quickSearch .form-input {
    padding : 10px;
    border  : none;
}

header .search-icon.submit {
    top  : 5px;
    left : -35px;
}

.dropdown--quickSearch .form-field {
    border : 1px solid;
}

.header-logo {
    width : 50%;
}

.dropdown--quickSearch .form {
    max-width : 100%;
}

ul.navPage-subMenu-list.all-second-level-plus-container.flyout-page-wrapper {
    overflow   : auto;
    max-height : 450px;
}

div#menu-wrapper.fixed {
    .search-icon.submit {
        top  : 5px;
        left : -35px;
    }

    .dropdown--quickSearch .form-input {
        padding     : 5px;
        padding-top : 0;
    }

    a.navUser-action.account.signin-list {
        top : 0px;
    }
}

@media only screen and (max-width: 800px){
    .mobileMenu-toggle {
        left : 0px;
    }

    .header-logo > a {
        width       : 100%;
        margin-left : 30px;
    }

    header .navUser {
        padding : 10px;
    }

    header .navUser-action .header-icon, li.navUser-item.quicksearch.mobile svg {
        height : 20px !important;
        width  : 20px!important;
    }

    li.navUser-item.navUser-item--account.user-icons.account {
        margin-left : 15px;
    }

    .mega-cat-dropdown {
        right : -100% !important;
    }

    .mega-cat-dropdown {
        width : 100%;
    }

    header .search-icon.submit {
        top  : -35px;
        left : -15px;
    }

    .dropdown--quickSearch > .container {
        padding-top : 60px;
    }

    .quickSearch-mobileToggle {
        top    : 25px;
        right  : 12.75px;

        border : none!important;
    }

    .dropdown--quickSearch .form, .dropdown--quickSearch .form-field {
        width : 100% !important;
    }

    a.mobileMenu-toggle.fixed.fixed-again.is-open {
        border : none!important;
    }

    a.mobileMenu-toggle.is-open {
        left   : 5px;
        border : none!important;
    }

    div#account-dropdown-signin-list.visible {
        display : none !important;
    }

    #menu li.top-level, .mega-cat-dropdown li.navPages-item {
        padding : 5px 0px;
    }

    .mega-cat-dropdown li.navPages-item a.navPages-action {
        font-size : 16px !important;
    }

    .mega-cat-dropdown li.navPages-item a.navPages-action {
        padding-top    : 0px !important;
        padding-bottom : 0px !important;
    }
}
    </style>​<style>
     
#menu .mega-cat-dropdown .has-subMenu.is-root + .navPage-subMenu-horizontal.second-level-flyout .page.inactive-page {
    position   : relative;
    display    : block;
    z-index    : 1 !important;

    height     : auto !important;
    margin-top : 0px !important;

    opacity    : 1 !important;

    transition : none;
}
header div#menu {
z-index: 9;
} 
.flyout-pagination-container.top.visible {
    display : none;
}

.mega-cat-dropdown li.navPages-item a.navPages-action {
    font-size : 14px !important;
}

.navUser-section .dropdown--quickSearch .form-input {
    padding : 10px;
    border  : none;
}

header .search-icon.submit {
    top  : 5px;
    left : -35px;
}

.dropdown--quickSearch .form-field {
    border : 1px solid;
}

.header-logo {
    width : 50%;
}

.dropdown--quickSearch .form {
    max-width : 100%;
}

ul.navPage-subMenu-list.all-second-level-plus-container.flyout-page-wrapper {
    overflow   : auto;
    max-height : 450px;
}

div#menu-wrapper.fixed {
    .search-icon.submit {
        top  : 5px;
        left : -35px;
    }

    .dropdown--quickSearch .form-input {
        padding     : 5px;
        padding-top : 0;
    }

    a.navUser-action.account.signin-list {
        top : 0px;
    }
}

@media only screen and (max-width: 800px){
    .mobileMenu-toggle {
        left : 0px;
    }

    .header-logo > a {
        width       : 100%;
        margin-left : 30px;
    }

    header .navUser {
        padding : 10px;
    }

    header .navUser-action .header-icon, li.navUser-item.quicksearch.mobile svg {
        height : 20px !important;
        width  : 20px!important;
    }

    li.navUser-item.navUser-item--account.user-icons.account {
        margin-left : 15px;
    }

    .mega-cat-dropdown {
        right : -100% !important;
    }

    .mega-cat-dropdown {
        width : 100%;
    }

    header .search-icon.submit {
        top  : -35px;
        left : -15px;
    }

    .dropdown--quickSearch > .container {
        padding-top : 60px;
    }

    .quickSearch-mobileToggle {
        top    : 25px;
        right  : 12.75px;

        border : none!important;
    }

    .dropdown--quickSearch .form, .dropdown--quickSearch .form-field {
        width : 100% !important;
    }

    a.mobileMenu-toggle.fixed.fixed-again.is-open {
        border : none!important;
    }

    a.mobileMenu-toggle.is-open {
        left   : 5px;
        border : none!important;
    }

    div#account-dropdown-signin-list.visible {
        display : none !important;
    }

    #menu li.top-level, .mega-cat-dropdown li.navPages-item {
        padding : 5px 0px;
    }

    .mega-cat-dropdown li.navPages-item a.navPages-action {
        font-size : 16px !important;
    }

    .mega-cat-dropdown li.navPages-item a.navPages-action {
        padding-top    : 0px !important;
        padding-bottom : 0px !important;
    }
}
    </style>​