Отображение мобильной навигации при нажатии с javascript

Question

Я пытаюсь отобразить мобильное меню при щелчке по значку бургера с помощью javascript, но не могу заставить его работать. Может кто поможет? Я прикрепил приведенный ниже код, в настоящий момент меню скрыто справа от экрана из-за свойства преобразования, но когда я нажимаю значок бургера, я хотел бы показать это. Есть ли проблема l ie в вызове свойства css, прикрепленного к родительскому элементу?

HTML

<header>
    <a href="/stjohnschurch" class="nav-brand">
        <img src="http://dev.righthookstudio.co.uk/stjohnschurch/wp-content/uploads/2020/05/St-Johns-Church.png" alt="st johns logo">
    </a>
    <nav>

    <?php wp_nav_menu(
         array (
            'theme_location' => 'primary-navigation',
            'menu_class' => 'primary-navigation'
        )
    );?>
    <div class="burger">
        <div class="line1"></div>
            <div class="line2"></div>
                <div class="line3"></div>
    </div>
    </nav>
</div>

CSS

@media (max-width: 991.98px) {
body {
    overflow: hidden;
}
header .primary-navigation {
    position: absolute;
    height: 100vh;
    top: 8vh;
    right: 0;
    z-index: 999;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5 ease-in;
}
header .primary-navigation li {
    opacity: 0;
}
.burger {
    display: block;
}
.nav-active {
    transform: translateX(0%);
}}

Javascript

const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('header > .primary-navigation');

burger.addEventListener('click', ()=>{
    nav.classList.toggle('nav-active');
}); } navSlide()