Parent Menu Item Requires Two Clicks for Mobile Device

Question

I don't know what's what wrong with my parent menu items. I have two that aren't working on the first click on mobile devices (I've been testing this on my android phone).

To make it look mobile responsive, I added some css:

@media (max-width: 500px) {
  &.main-navigation {
    .menu-main-menu-container {
      display: none;
      position: absolute;
      width: 80%;

      ul#menu-main-menu {
        display: block;
        margin: 0;

        #menu-item-6, #menu-item-7 {          
          ul.sub-menu {
            display: none;
          }
        }

        #menu-item-6:hover, #menu-item-7:hover {
          ul.sub-menu {
            display: block;
          }
        }
      }// ul#menu-main-menu
    }// .menu-main-menu-container

    .menu-toggle {
      margin: 0;
      width: 20%;
    }

    .menu-toggle::before {
      transform: translateX(100%);
    }
  }// end &.main-navigation

  #header-search-toggle {
    display: none;
  }
}// max-width: 500px

It was like this from the start of my web project. I've built a handful of other wp projects the past year and this is the first time the parent menu items aren't clickable on the first click. Any ideas? Is this, perhaps, due to some sort of weird wordpress setting in the backend?

Answer 1

I know it's an old post, but I've just run into the same problem and I thought that perhaps it will help someone. To solve it, you can also go to navigation.js (in my case) and comment out this part below related to adding the "focus" class.

* Sets or removes .focus class on an element.

function toggleFocus() {
    if ( event.type === 'focus' || event.type === 'blur' ) {
        let self = this;
        // Move up through the ancestors of the current link until we hit .nav-menu.
        while ( ! self.classList.contains( 'nav-menu' ) ) {
            // On li elements toggle the class .focus.
            if ( 'li' === self.tagName.toLowerCase() ) {
                self.classList.toggle( 'focus' );
            }
            self = self.parentNode;
        }
    }

    if ( event.type === 'touchstart' ) {
        const menuItem = this.parentNode;
        event.preventDefault();
        for ( const link of menuItem.parentNode.children ) {
            if ( menuItem !== link ) {
                link.classList.remove( 'focus' );
            }
        }
        menuItem.classList.toggle( 'focus' );
    }
}

Answer 2

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");
    }
});