Expandable sub-menus in Moesia on mobile

Hi, thanks for your great theme,
I’m feeling that the primary menu looks too long on a mobile device when it expands all the submenus automatically. I notice it’s the same on your demo. At desktop resolution it hides the submenus but expands them on hover, which is great.
I’ve managed to hide the sub-menus using css-class hidden-xs on each sub, but I can’t then find a way of expanding them again if the user clicks on the parent menu item.
The site is under development at wp.airtightproductions.co.uk
Many thanks for any assistance you may be able to offer.
Cheers, Alan

Hello there,

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

       'use strict'

       if ( matchMedia( 'only screen and (max-width: 991px)' ).matches ) {
       
         $('.main-navigation').children().find('.children').wrap('<div class="sub-menu-wrapper" style="display: none;" />');

         $('.page_item_has_children').children('a').click(function(){

            $(this).next('.sub-menu-wrapper').slideToggle();

            return false;
         
         }); 

       }      

    })(jQuery); 
  1. Update

Regards,
Kharis

Hi Kharis,
Thanks so much for your swift reply!
I’ve tried the above but it’s not changing how the menu works in mobile resolution. If I have the ‘CSS Classes’ blank in each sub-menu setting, it shows the submenus all the time, and if I have it as “page-scroll hidden-sm hidden-md hidden-xs” as it was before then it still doesn’t react to be selected.
Is there anything else I should be doing to make it respond?
Thanks again
Alan

Hello Alan,

I am sorry for suggesting incorrect code. I noticed that the classes has been changed because of version update. Please replace the code with this one:

;(function($) {

  'use strict'

  if ( matchMedia( 'only screen and (max-width: 991px)' ).matches ) {

    if( $('.menu-item-has-children').length ) {
        $('.menu-item-has-children').each(function(){

          $(this).children('.sub-menu').wrap('<div class="sub-menu-wrapper" style="display: none;" />');
          $(this).children('a').click(function(){

             $(this).next('.sub-menu-wrapper').slideToggle();

             return false;

          });

        });
    }

  }

})(jQuery);

Regards,
Kharis

Hi Kharis,
That’s great - works a treat! Really appreciate your help.
All the best to you and the team…
Yours, Alan

You’re welcome Alan!

Happy to hear that worked for you. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis