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
    Commented Jul 1, 2021 at 5:57
  • The toggling isn't working.
    – paulwk
    Commented Jul 1, 2021 at 12:54
  • How can you see the burger? Its commented...
    – funkysoul
    Commented Jul 1, 2021 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
    Commented Jul 1, 2021 at 14:22

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.