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">
<!-- <button class="menu-toggle" aria-controls="topics-menu" aria-expanded="false"><?php esc_html_e( 'Topics Menu', 'mystic' ); ?></button> -->
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-2',
'menu_id' => 'topics-menu',
)
);
?>
</nav><!-- #site-navigation -->
</div>
<nav id="mobile-navigation" class="main-navigation">
<!--<button class="menu-toggle" aria-controls="topics-menu" aria-expanded="false"><?php esc_html_e( 'Topics Menu', 'mystic' ); ?></button>-->
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-2',
'menu_id' => 'topics-menu',
)
);
?>
</nav>
</section>
and here's the js:
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');
}
}