Archived topic
Expand submenus on mobile with ability to close each one again
7 replies · Started by Ralph on May 23, 2020
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
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 :)
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
I don't believe you've put in # for the URL field as suggested in the article.
Can you confirm?
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.
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.
Hi Tom,
it may not be a great way, but it works great ;)
Thank you for your support!
Kind regards,
Ralph
Glad I could help :)
