[Resolved] Expand submenus on mobile with ability to close each one again

[Ralph]

Hi,

I want to open all submenus on mobile, which I achieved by using that CSS code (which I found here in the support area):

.main-navigation.toggled .main-nav ul ul {
	position: relative;
	top: 0;left: auto!important;
	right: auto!important;
	width: 100%;
	pointer-events:auto;
	height: auto;
	opacity:1;
	display: block;
	visibility:visible;
}

But I want the menu toggles to stay active, so when clicking on a main menu item, the corresponding sub menu should close again. I’m also using main menu items, which don’t have a submenu and it is quite confusing if some of the main menu items are clickable and others are not. This is why I want the main menu items with submenu to fulfill a suitable function.

Thank you,
Ralph

[Leo]

Hi there,

Can you try setting up the menu items so they have this format first?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link

Let me know 🙂

[Ralph]

Hi Leo,

I already use custom links for the main menu items which have a submenu, but I want that the submenu folds when clicking on the corresponding main menu item.

Kind regards
Ralph

[Leo]

I don’t believe you’ve put in # for the URL field as suggested in the article.

Can you confirm?

[Ralph]

Yes, that’s true. I just changed all main menu item URLs to #. But that change didn’t affect the behaviour of the submenu items, they still stay open.

[Tom]

There’s not really a great way to do this.

You could try removing your CSS, then add some javascript:

<script>
    jQuery( document ).ready( function( $ ) {
        $( '#mobile-header .sub-menu' ).addClass( 'toggled-on' );
        $( '#mobile-header .menu-item-has-children' ).addClass( 'sfHover' );
    } );
</script>

This can be added using a Hook Element added to the wp_footer hook, or in a custom javascript file without the <script> tags.

[Ralph]

Hi Tom,

it may not be a great way, but it works great 😉
Thank you for your support!

Kind regards,
Ralph

[Tom]

Glad I could help 🙂

[Author]

Posts