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") {
    } else {

and my PHP in header.php:

        'theme_location' => 'header-menu',
        'menu_id' => 'mobile-menu',

What am I missing to make this toggle off?

Thanks in advance

  • This is no WordPress-specific question and must be considered off-topic.
    – leymannx
    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
    Apr 1, 2019 at 11:56

1 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

  'theme_location' => 'header-menu',
  'menu_id' => 'mobile-menu',
  'container_id'    => 'mobile-menu',
  • I've tried adding container_id, with and without menu_id and the problem persists apparently unchanged. The only difference is there is another div around the menu. Why should container_id work? I've also tried adding and removing a class, but while the function runs on each click (for instance a console log will run) the CSS doesn't change after the first time
    – JakePowell
    Mar 29, 2019 at 14:08
  • Try to move your JS from header to footer, this might help you out. Thanks Mar 29, 2019 at 14:15
  • I'm afraid it's already in the footer!
    – JakePowell
    Mar 29, 2019 at 14:20

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.