Parent Menu Item Requires Two Clicks for Mobile Device

I found the solution.

I looked in the inspector and noticed that on the 1st click of one of my parent menu items, WordPress appends a “focus” class for that menu item. Only on the 2nd click of the parent menu item are you taken to the page. I’m not sure why WordPress does that. Is this some sort of default behavior that WordPress does for its parent menu items? If anyone can shed some light into this, I’d be grateful. I’m not using any plugins for my menu either.

Anyway, my solution was to .addClass “focus” using jQuery to all my parent menu items. This fixed the issue and now on my Android phone, one click of a parent menu item takes me to the page.

UPDATE: I forgot that I needed to add the “if” condition, or else the sub-menus will display on non-mobile devices without clicking. (I believe the standard is 480px, but I prefer 500px)

jQuery(document).ready(function($) {
    if ($(window).width() <= 500) {
        $("#menu-item-6, #menu-item-7").addClass("focus");
    }
});