Toggle not working on mobile nav

I’ve spend a better part of a day trying to get a mobile menu to work on my WordPress site. The hamburger menu appears fine, but unlike another site I used this menu on, this one doesn’t work. I’m fairly certain that its javascript issue, but I’m not getting any console errors or any errors in the VS Code. Any help will be greatly appreciated.

<div class="burger">
                <div class="line line-1"></div>
                <div class="line line-2"></div>
                <div class="line line-3"></div>
</div>

<section class="header-nav">
        <div class="container borders">
            <nav id="site-navigation" class="main-navigation">
                <?php esc_html_e( 'Topics Menu', 'mystic' ); ?>
                <?php
                wp_nav_menu(
                    array(
                        'theme_location' => 'menu-2',
                        'menu_id'        => 'topics-menu',
                    )
                );
                ?>
            </nav><!-- #site-navigation --> 
        </div>      

        <nav id="mobile-navigation" class="main-navigation">
                <?php esc_html_e( 'Topics Menu', 'mystic' ); ?>
                <?php
                wp_nav_menu(
                    array(
                        'theme_location' => 'menu-2',
                        'menu_id'        => 'topics-menu',
                    )
                );
                ?>                  
                
    </nav>

And here’s the jQuery:

class Header {
constructor(){
    this.burger = document.querySelector('.burger')
    this.nav = document.querySelector('#mobile-navigation')

    this.events()

}

events(){
    this.burger.addEventListener('click', (e)=> {
        this.toggleBurger(e)
    })

    window.addEventListener('resize', (e) => {
        this.handleWindowResize()
    })
}

toggleBurger(e){ 
    jQuery(this.nav).slideToggle();
    jQuery(this.burger).toggleClass('open');
}

handleWindowResize(){
    if(window.innerWidth > 768){
        jQuery(this.nav).slideUp()
        jQuery(this.burger).removeClass('open');
    } else {
        // jQuery(this.nav).slideUp()
        // jQuery(this.burger).removeClass('open');
    }
}

• This topic was modified 3 years, 8 months ago by backinblack.