I'm creating a Wordpress site with a Superfish CSS3 / Jquery dropdown menu, complete with hoverIntent as displayed here:


As far as I can see, this menu works well on mobile devices, because the link values refer to the same page, like #a, so that clicking a link does not cause the page to reload.

Please bear with me. I know that the right way would be to replace the dropdown menu entirely (with a select box or some other tool), but I need to have the exact same experience as on a desktop (long story).

My question is: how can I replace the href value of parent pages, with an internal link like #a?

My guess would be that doing this via jQuery would be the best solution. What are your views on this and could someone please provide a practical answer? Thanks in advance.

  • off topic - should be moved to SO. – kaiser Sep 11 '12 at 14:01
  • I understand this could be seen as a non-Wordpress question, but your answer proves my questions' validity here, no? :-) – chocolata Sep 11 '12 at 18:42
  • No, it doesn't :) I've just proven, that your problem with Suckerfishe is a plain js problem. I also showed you, that you have alternatives, that avoid having this problem (as well as having Suckerfish). As I'm one of the higher rep users here, I just try to show others how cosy our place is and that you can help each other in a friendly way :) – kaiser Sep 12 '12 at 1:03
  • Alright, kaiser, you have a point! I'll keep it in mind. Thanks for your friendly suggestion. – chocolata Sep 12 '12 at 8:34

In my experience, Superfish actually does not rely on in-page links in order to show the submenus on touch devices (although admittedly I'm basing this solely on iOS devices).

Simply tap once on a top-level menu item and its submenu should show. A subsequent tap on the same top-level menu item would cause the browser to load that link.

| improve this answer | |
  • Thanks, joel. I'll be testing it out on Android devices to confirm this! – chocolata Sep 12 '12 at 10:04

You could do multiple things to get this working:

jQuery( '.your-nav-menu-item-class' ).on( 'click', function( e )

    // replace the link here

    return false;

You could also just use a walker class.

Or one of the filters inside wp_nav_menu() - just check the source.

  • Before the Walker: apply_filters( 'wp_nav_menu_objects', $sorted_menu_items, $args )
  • After the Walker: apply_filters( 'wp_nav_menu_items', $items, $args )
  • Same, but more specific: apply_filters( "wp_nav_menu_{$menu->slug}_items", $items, $args )
  • The resulting HTML: apply_filters( 'wp_nav_menu', $nav_menu, $args )
| improve this answer | |
  • Thank you for your answer. It gives a clear view of the functions of the wp_nav_menu. Thank you for providing an alternative aswell. Very useful! – chocolata Sep 11 '12 at 18:43

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