I'm recreating a Joomla site in WordPress with Elementor Pro. The site I'm recreating has a main menu bar with many of the menu items having sub-menu dropdowns. The nav menu widget has given me the ability to recreate this except for one important thing. The menu items for the Joomla site that have sub-menu dropdowns, don't themselves take you to a different page. They are only used to allow for the sub-menus to appear.

Here is an image to go along with the example below: nav-menu

So for example, if a menu item (e.g. "Donate") doesn't have a sub-menu dropdown, then clicking it will take you to its page (e.g. in this case the Donate page). But if a menu item (e.g. "Contact") does have a sub-menu dropdown, then clicking it will not take you to a different page, but the items in it's sub-menu dropdown (e.g. in this case "Visit" and "Employment") will take you to different pages.

As far as I can tell, the nav menu widget has no directly way for making a menu item be exclusively for allowing a dropdown sub-menu to appear. So I was wondering if there was a work around to allow for this.

The first thing I tried was adding this code to the custom css section for the nav menu widget:

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

But this also disable the sub-menu dropdown.

The second thing I tried was creating an HTML widget with the following code:

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

But this doesn't seem to do anything. I think it's because the code executes before the nav menu HTML appears, but I'm not sure.