Adding sub-menu item makes parent item unclickable

Question

Unfortunately, I do not have a way to reproduce this since I don't know what is causing the issue, but I can provide plenty of details. The problem is this:

In the nav bar the parent menu item works perfectly fine by itself, but as soon as I add sub-menu items beneath it the parent item becomes unclickable.

• I assumed there must be some invisible element on top of the parent item that was preventing me from clicking it. From what I can tell, there is not element on top of the parent item.
• I went into dev tools and set the sub-menu to display:none;. No change.
• I set a z-index for the parent item of 9999. No change.
• This behavior is consistent across all pages and in the mobile menu.

The only way I've found to fix it is to remove the sub-menu items so I know it must be related to them, but if the submenu is displaying what else could be making the parent item unclickable?

I'm out of ideas. What else could cause this behavior?

Answer 1

The issue is javascript targeting the menu-item-has-children class and adding a preventDefault to the click event. Pretty standard stuff but annoying when it's not an option you can choose to turn off.

Answer 2

use this plugin to add link on parent

<?php 
/*
Plugin Name: Menu Link
Description: Quick Custom Solution Plugin for Implementing Custom Solution.
Version: 1.0.0
Author: Rohit Kauhsik
Author URI: https://in.linkedin.com/in/rohit-kaushik-108a2383
License: GNU General Public License (Version 2 - GPLv2)
*/

function  custom_nav_menu_link_attributes( $atts, $item, $args ){
  if ( !wp_is_mobile() && $args->has_children  ) {
            $atts['href'] = ! empty( $item->url ) ? $item->url : '';
    }
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'custom_nav_menu_link_attributes', 99, 3 );

function func_make_menu_clickable(){
if ( !wp_is_mobile() ) { ?>
  <script type="text/javascript">
    jQuery(document).ready(function($){      
      if($(window).width() >= 767){
        $('li.menu-item a').click(function(){
          window.location = $(this).attr('href');
        });
      }
    });
  </script>
  <style type="text/css">
  @media all and (min-width: 767px) {
  .menu-item-has-children:hover > ul {
  display: block;
}
}
  </style>
<?php }
}
add_action('wp_footer', 'func_make_menu_clickable', 1);