Mobile menu will only toggle on

Question

I've got a mobile menu that will toggle on, but it just won't go away.

my JS:

const menu = document.getElementById("mobile-menu");
const button = document.getElementById("navButton");

button.addEventListener("click", function(){
    if (menu.style.display="none") {
        menu.style.display="block"
    } else {
        menu.style.display="none"
    }
})

and my PHP in header.php:

 wp_nav_menu(array(
        'theme_location' => 'header-menu',
        'menu_id' => 'mobile-menu',

What am I missing to make this toggle off?

Thanks in advance

Answer 1

Please read this documentation https://developer.wordpress.org/reference/functions/wp_nav_menu/

menu_id (string) The ID that is applied to the ul element which forms the menu. The default is the menu slug, incremented.

container_id (string) The ID that is applied to the container.

Try to add container_id in wp_nav_menu array(), I hope it'll help you out. Thanks

wp_nav_menu(array(
  'theme_location' => 'header-menu',
  'menu_id' => 'mobile-menu',
  'container_id'    => 'mobile-menu',
  )
)