Edit menu structure, customize wp_nav_menu

  • I have a wordpress theme for mobile. In mobile menu I have a list, I want that the user can click inside the <li> container to go to the page and not necessary to the text label.
    So I want a menu with this structure:

    <ul>
<a href="$item->url"><li ...>element</li></a>
</ul>

    How I can do that, so how to customize wp_nav_menu to edit display structure of elements inside menu?
    I know there is the Walker attribute for wp_nav_menu, I tried that but do not know how to use that.
    Can someone give me some examples?

    Thanks
    Valentina

    • This topic was modified 8 years, 1 month ago by steplab.
    • This topic was modified 8 years, 1 month ago by steplab.
    • This topic was modified 8 years, 1 month ago by Andrew Nevins.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That’s not valid markup, can you expand on the intent of your issue?

    Thread Starter steplab

    (@steplab)

    How you think I can resolve it?
    I know is not w3c standard, in alternative can I add attributes to <li> element?
    So:

    <ul>
<li ... onclick="document.location.href='$item->url';"><a ...>item</a></li>
</ul>

    There is some filter I can use?

    The intent is to make more easy to the user navigating with smartphone to simply touch the menu item <li> to go to the page link, so not exclusively touch text inside menu item (<a> ).

    • This reply was modified 8 years, 1 month ago by steplab.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m not sure what your original issue is. Surely navigation items go to the page by default, unless you have custom functionality and so you have this issue?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    A user cannot press on an <li> because it is not an interactive element. This is why I think something else is going on like custom behaviour.

    Thread Starter steplab

    (@steplab)

    Well, I resolved with jQuery:

    $(".menu-newmainmenu-container li.menu-item").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
	});

    Thanks anyway

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Edit menu structure, customize wp_nav_menu’ is closed to new replies.