-2

I have a Wordpress menu that I am using as a Hamburger menu for smaller mobile devices. Since there really isn't a "hover" event for touch devices, I have changed the main menu items to show their corresponding sub menus on "click" (or "touch"). The problem is that I can't make the main menu items clickable. Also, I don't see an option in "wp_nav_menu" to show the top level item on the submenu. That is how I would be inclined to use it. I need a workaround or something like that.

  • 3
    This sounds like a Javascript issue more than a WordPress issue. JQuery does have a doubleclick event maybe that will work for you? – Howdy_McGee Dec 30 '15 at 21:55
  • I have been using the mmenu js script to handle mobile menus recently. Has lots of options and it's not too complicated to setup. – gdaniel Dec 30 '15 at 22:02
  • @N00b I'm not sure how reliable wp_is_mobile() actually is so I would use that function with a grain of salt. – Howdy_McGee Dec 30 '15 at 22:13
1

You could solve this with other nasty hacks but here's kind of WordPress way:

In your header.php

<?php
// User is not using mobile
if( ! wp_is_mobile() ) {

    wp_nav_menu(); // Your "original menu"    
}
// User is using mobile
else if( wp_is_mobile() ) {

    wp_nav_menu(); // Your another menu that only has top level items
}
?>

Keep in mind that wp_is_mobile() also considers tablets as mobile devices and you should always carefully think this through because if PC window is resized to small / narrow -> it obviously doesn't count it as mobile.

And jQuery to disable your click event:

var isMobile = false;

// Check if user is using mobile device
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

    isMobile = true;
}

if( ! isMobile ) {

    // Your usual click event
}
  • 1
    wp_is_mobile() is a joke and should be regarded as such, unless you are happy with between 80-90% success rate and happy to to dish wrong info to all the other users ;-) – Pieter Goosen Dec 30 '15 at 23:00
0

This works well. The second click goes to the page...

$(".smallNavigation > ul > li > a").click(function (e) {

    $("ul.sub-menu").hide();
    $("ul.sub-menu", $(this).parent("li")).show();

    e.preventDefault();
    $(this).unbind(e);

})

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.