Hamburger Navigation

Question

I built a hamburger menu with a small animation but for the life of me I cannot figure out why it disappears after it is triggered as "active". Everything works perfectly after much trouble shooting but the fact that the hamburger menu disappears after the side menu opens up does not give the user the ability to close the menu and continue navigating the site. I posted all relevant code below please let me know what I overlooked.

window.onload = function () {
    window.addEventListener('scroll', function (e) {
        if (window.pageYOffset > 100) {
            document.querySelector("header").classList.add('is-scrolling');
        } else {
            document.querySelector("header").classList.remove('is-scrolling');
        }
    });

    const menu_btn = document.querySelector('.hamburger');
    const mobile_menu = document.querySelector('.mobile-nav');

    menu_btn.addEventListener('click', function () {
        menu_btn.classList.toggle('is-active');
        mobile_menu.classList.toggle('is-active');
    });
}

.hamburger {
    grid-row-start: A;
    grid-column-start: A; 
    grid-row-end: A;
    grid-column-end: A; 
    align-self: center;
    justify-self: center;
    position: relative;
    display: block;
    width: 35px;
    cursor: pointer;
    
    appearance: none;
    background: none;
    outline: none;
    border: none;
}

.hamburger .bar, .hamburger:after, .hamburger:before {
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    background-color: #000;
    margin: 6px 0px;
    transition: 0.4s;
}

.hamburger.is-active:before {
    transform: rotate(-45deg) translate(-8px, 6px);
}

.hamburger.is-active:after {
    transform: rotate(45deg) translate(-9px, -8px);
}

.hamburger.is-active .bar {
    opacity: 0;
}

.mobile-nav {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    min-height: 100vh;
    display: block;
    z-index: 98;
    background-color: #12002F;
    padding-top: 120px;
    transition: 0.4s;
}

.mobile-nav.is-active {
    left: 0;
}

.mobile-nav a {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto 16px;
    text-align: center;
    padding: 12px 16px;
    background-color: #1f103F;

    color: #FFF;
    text-decoration: none;
}

.mobile-nav a:hover {
    background-color: #24104f;
}

<button class="hamburger">
    <div class="bar"></div>
</button>

<nav class="mobile-nav">
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
</nav>

Answer 1

It's being hidden behind mobile-nav, one solution is to increase it's z-index to continue to have it show

.mobile-nav {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    min-height: 100vh;
    display: block;
    z-index: 98; /* Has to be greater than this z-index */
    background-color: #12002F;
    padding-top: 120px;
    transition: 0.4s;
}