Mobile menu code (Items in the anchor menu). At the moment, after clicking on the menu item, the scroll occurs, and the menu does not close.

<div class="header__nav-wrap"> <div class="header__nav-close"></div> <ul class="header__nav"> <?php wp_nav_menu( array( 'theme_location' => 'header_menu', 'menu' => '', 'container' => false, 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => 'nav-main', 'echo' => true, 'fallback_cb' => '__return_empty_string', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '%3$s', 'depth' => 0 ) );?> <li class="header__nav-number"> <a href="tel:"></a> </li> </ul> </div>
  • php not much needed here. Add ready-made markup and js code for the mobile menu and scroll through anchors. - zhurof
  • @zhurof I would like to see some solutions. Maybe someone already did. - Lemp
  • To close your menu, you need to know how it opens and what happens when you click on its links. - zhurof

1 answer 1

 ;(function (){ const nav = document.querySelector(".header__nav"); nav.addEventListener("click", function(ev){ nav.setAttribute("style", "visibility:hidden"); }); })(); 
 <div class="header__nav-wrap"> <div class="header__nav-close"></div> <ul class="header__nav"> <!-- <?php wp_nav_menu( array( 'theme_location' => 'header_menu', 'menu' => '', 'container' => false, 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => 'nav-main', 'echo' => true, 'fallback_cb' => '__return_empty_string', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '%3$s', 'depth' => 0 ) );?>--> <li class="header__nav-number"> <a href="tel:"></a> </li> </ul> </div>

Here is an approximate solution to your problem:

  • hang handler on click on your menu;
  • when clicking, we change the visibility of ul ul to hidden, the method of concealment may not suit you - use the method that is provided for in WordPress (it is possible that you can assign a special class to hide it, I’m not strong in WordPress);
  • the menu is hidden