Add href to <a> tag in nav menu for mobile

Question

I have a primary menu which is displayed for desktop

<?php
 //Show the navigation menu
   wp_nav_menu(array(
     'theme_location'    =>  'primary-nav',
      'menu_class'        =>  'navigation d-block',
      'walker'            =>  new My_Walker_Nav_Menu()
        ));
 ?>

And this is the menu for mobile

<?php
  //Show the navigation menu
  if(wp_is_mobile()) {
  wp_nav_menu(array(
  'theme_location' => 'mobile-menu',
  'menu_class' => 'main-ul'
  ));
  }
?>

How can I add a href="javascript:void(0)" for the mobile menu? Menu is:

About ˅

-child

News

Contact

I want if in mobile when About is clicked to show the child and not link you to About page.

Answer 1

This is really a problem i think you should solve with javascript if you are looking to solve it with code. I would suggest that you could probably use the wp_is_mobile to add a class to your HTML tag

If that class exists on your html tag run some JS that binds to all the menu items in question's clicks using something like $('.CUSTOM-CLASS-FOR-MENU-ITEM').click(e){ e.preventDefault();} and then the links on those menu items will do nothing.

although I think a much better simple solution, would be to add Custom link Items where the link is just a # mark which will do nothing as well but allow you to :focus it, :hover it etc. You already have two separate menu locations declared in wordpress why not build two different menus and replace that About menu Item with a custom link item and then there is no need for javascript whatsoever.