0

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');
    }
}
4
  • What is not working? The display itself or the toggling?
    – funkysoul
    Jul 1 at 5:57
  • The toggling isn't working.
    – paulwk
    Jul 1 at 12:54
  • How can you see the burger? Its commented...
    – funkysoul
    Jul 1 at 13:10
  • That's the button that comes with the underscores theme. I have that commented out, but I have a hamburger that usually toggles. That's what I'm calling in the jQuery. I'm adding it to the code above.
    – paulwk
    Jul 1 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.