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

Home Forums Support Expand submenus on mobile with ability to close each one again

  • This topic has 7 replies, 3 voices, and was last updated 5 months ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1297774
    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

    #1298266
    Leo
    Staff
    Customer Support

    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 🙂

    #1298295
    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

    #1298385
    Leo
    Staff
    Customer Support

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

    Can you confirm?

    #1298425
    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.

    #1298611
    Tom
    Lead Developer
    Lead Developer

    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.

    #1299061
    Ralph

    Hi Tom,

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

    Kind regards,
    Ralph

    #1299544
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.