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

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

• javascript

• This is no WordPress-specific question and must be considered off-topic. – norman.lol Commented Mar 29, 2019 at 18:58
• I believe that it is something to do with how WordPress generates menus or how JS integrates with templates, because it's a fairly simple JS script that isn't doing what it should. Even JS lifted directly from a tutorial like W3 schools will not work in this case. I've still not cracked it! – JakePowell Commented Apr 1, 2019 at 11:56

1 Answer 1

Please read this documentation https://developer.wordpress/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',
  )
)