[qweasdzycParticipant]

Hi

I am using a megamenu and it looks great in desktop. On mobile, the menu becomes very long and requires a lot of scrolling to get to top-level menu items that are after the top-level for the megamenu.

I’m wondering if it’s possible to collapse the megamenu on mobile so that it’s folded up and users can tap to unfold.

Thanks!

[ZeshanMember]

Hi there,

Thank you for writing in!

Yes, it is possible but the parent menu item will no longer be functional on mobiles (in this case “Services”). To achieve this, add the following code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {

  var megaMenuLink = $('.x-nav li.x-megamenu a.sf-with-ul'),
      megaMenu = $('.x-nav .x-megamenu>.sub-menu');

  megaMenuLink.click(function(e) {
    e.preventDefault();
    megaMenu.toggleClass('visible');
  });
});

And following CSS code under Custom > CSS in the Customizer:

.x-nav .x-megamenu>.sub-menu {
   height: 0px;
   overflow: hidden;
}

.x-nav .x-megamenu>.sub-menu.visible {
   height: auto;
}

Hope this helps. 🙂

Thank you.

[qweasdzycParticipant]

Great, that’s exactly what I asked for!

I think though, maybe I asked for the wrong thing 🙂

For what I have in mind, it might be better if in mobile, there is a way to hide the third-level items in the megamenu?

[ZeshanMember]

Hi there,

For that purpose, please use the following codes instead of the one provided above.

jQuery(document).ready(function($) {

  var megaMenuLink = $('.x-nav .x-megamenu>.sub-menu>li>a.sf-with-ul'),
      megaMenu = $('.x-nav .x-megamenu>.sub-menu>li>.sub-menu');

  megaMenuLink.click(function(e) {
    e.preventDefault();
    $(this).siblings(megaMenu).toggleClass('visible');
  });
});

And following CSS code:

.x-nav .x-megamenu>.sub-menu>li>.sub-menu {
   height: 0px;
   overflow: hidden;
}

.x-nav .x-megamenu>.sub-menu>li>.sub-menu.visible {
   height: auto;
}

Hope this helps. 🙂

Thank you.

[qweasdzycParticipant]

Thank you very much!

I ended up throwing the CSS under a media query so that it only applied when the mobile version of the menu was displayed.

@media (max-width: 979px) {
      .x-nav .x-megamenu>.sub-menu>li>.sub-menu {
              height: 0px;
              overflow: hidden;}
      .x-nav .x-megamenu>.sub-menu>li>.sub-menu.visible {
              height: auto;}
}

[ChristianModerator]

Glad you’ve sorted it out. 🙂

[Author]

Posts