Estoy recreando un sitio de Joomla en WordPress con Elementor Pro. El sitio que estoy recreando tiene una barra de menú principal con muchos de los elementos del menú que tienen menús desplegables de submenú. El widget del menú de navegación me ha dado la posibilidad de recrear esto excepto por una cosa importante. Los elementos del menú para el sitio de Joomla que tienen menús desplegables de submenú, no lo llevan a una página diferente. Solo se utilizan para permitir que aparezcan los submenús.

Aquí hay una imagen para acompañar el ejemplo a continuación: nav-menu

Entonces, por ejemplo, si un elemento del menú (p. ej., "Donar") no tiene un submenú desplegable, hacer clic en él lo llevará a su página (p. ej., en este caso, la página de Donar). Pero si un elemento del menú (p. ej., "Contacto") tiene un submenú desplegable, al hacer clic en él no se le llevará a una página diferente, sino a los elementos de su submenú desplegable (p. ej., en este caso, "Visita" y " Empleo") lo llevará a diferentes páginas.

Por lo que puedo decir, el widget del menú de navegación no tiene una forma directa de hacer que un elemento del menú sea exclusivo para permitir que aparezca un submenú desplegable. Así que me preguntaba si había algún trabajo para permitir esto.

Lo primero que intenté fue agregar este código a la sección CSS personalizada para el widget del menú de navegación:

 selector .has-submenu { pointer-events: none; }

Pero esto también deshabilita el menú desplegable del submenú.

Lo segundo que intenté fue crear un widget HTML con el siguiente código:

 <script> var anchorsWithSubMenus = document.querySelectorAll(".has-submenu"); for (var i = 0; i < anchorsWithSubMenus.length; i++) { anchorsWithSubMenus[i].href = "#" } </script>

Pero esto no parece hacer nada. Creo que es porque el código se ejecuta antes de que aparezca el HTML del menú de navegación, pero no estoy seguro.