The following JavaScript and CSS should make it so, when on mobile, that the submenus will open on a click on their respective menu items. We may also need to work on this a bit as it has not been tested on your site.
Reminder: it is always best to test things out on a staging site if possible!
Here’s how to apply JS and CSS to your site …
- How to apply JavaScript: https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/
- How to apply CSS: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
Javascript via php snippet
add_action( 'wp_footer', 'add_ultra_js' );
function add_ultra_js() { ?>
<script>
if ( window.screen.width < 600 ) {
let ultraNavMenuTwo = document.querySelectorAll( 'li' );
for ( let i = 0; i < ultraNavMenuTwo.length; i++ ) {
if ( ultraNavMenuTwo[i].classList.contains('wp-block-navigation-submenu') ) {
ultraNavMenuTwo[i].firstChild.addEventListener( "click", ultraToggleSubMenuTwo );
ultraNavMenuTwo[i].style.cursor = "pointer";
}
}
}
function ultraToggleSubMenuTwo( e ) {
let ultraNavSubmenuTwo = e.target.nextSibling.nextSibling;
ultraNavSubmenuTwo.classList.toggle( "active" );
}
</script>
<?php }
CSS
.ultraOpenSubmenu {
display: block;
}