@media (max-width: 767px) {
    .navbar-left .navbar-collapse {
        position: fixed;
        top: 75px;
        left: 0;
        padding-left: 25px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 75%;
        height: 100%;
    }
    .navbar-left .navbar-collapse.collapsing {
        left: -75%;
        transition: right 0s ease;
    }
    .navbar-left .navbar-collapse.show {
        left: 0;
        transition: right 300ms ease-in-out;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    }
    .navbar-left .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: left 100ms ease-in-out;
    }
    .navbar-right .navbar-collapse {
        position: fixed;
        top: 60px;
        right: 0;
        padding-left: 25px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 75%;
        height: 100%;
    }
    .navbar-right .navbar-collapse.collapsing {
        right: -75%;
        transition: left 0s ease;
    }
    .navbar-right .navbar-collapse.show {
        right: 0;
        transition: left 300ms ease-in-out;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    }
    .navbar-right .navbar-toggler.collapsed ~ .navbar-collapse {
        position: inherit;
        transition: right 100ms ease-in-out;
    }
}