Mobile overlay: nested menu should collapse by default

I just fixed this doing some tweak. if anyone looking for this. without blocking main menu link.

I can also share if anyone still looking to this.

I have done this in latest WordPress Theme.

CSS:
@media (max-width:599px) { header .wp-block-navigation .wp-block-navigation-item { justify-content: center; } header .wp-block-navigation ul li { width: 100%; } header .wp-block-navigation .wp-block-navigation__submenu-icon { height: auto; width: auto; position: absolute; border: 1px solid #ccc; padding: 3px; right: 0; top: 4px; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { display: none; width: 100%; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { display: block; } }

jQuery:
/* + Document On Ready */ $(document).on("ready", function() { $(".wp-block-navigation-submenu__toggle").on("click", function() { var li = $(this).parent(); if ( li.hasClass("ddl-active") || li.find(".ddl-active").length !== 0 || li.find(".wp-block-navigation-submenu").is(":visible") ) { li.removeClass("ddl-active"); li.children().find(".ddl-active").removeClass("ddl-active"); li.children(".wp-block-navigation-submenu").slideUp(); } else { li.addClass("ddl-active"); li.children(".wp-block-navigation-submenu").slideDown(); } }); });