[Delphine AParticipant]

Here is my site url: delphineatoi2voir.fr/maquette

[ZeshanMember]

Hi Delphine,

Thank you for writing in!

Please add following code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
   function submenuCollapse() {
      windowsize = $(window).width();
      if(windowsize < 980) {
         var megaMenuLink = $('.x-navbar .x-nav > li > a.sf-with-ul'),
             megaMenu = $('.x-nav .sub-menu>li>.sub-menu' );

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

and following under Custom > CSS in the Customizer:

@media (max-width: 979px) {
   .x-navbar .x-nav > li > ul.sub-menu {
      display: none !important;
      visibility: hidden !important;
   }
   .x-navbar .x-nav > li > ul.sub-menu.visible {
      display: block !important;
      visibility: visible !important;
   }
}

Hope this helps. 🙂

Thank you.

[Michael FParticipant]

This reply has been marked as private.

[Michael FParticipant]

Hi,

I have just applied the code directly above into the theme and it works to an extent.

The Main Menu is displayed when the mobile menu button is touched. When the main menu link is touched it displays the submenus and all contents of all the submenues.

I’m trying to get the main menu link to display the submenus, then when a submenu is clicked it displays the links of that particular submenu.

Thanks for all the advice so far,

Michael

[ZeshanMember]

Hi Micheal,

Thank you for writing in!

Instead of adding above codes, please try adding the following under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
   function submenuCollapse() {
      windowsize = $(window).width();
      if(windowsize < 980) {
         var subMenuLink = $('.x-navbar a.sf-with-ul'),
             subMenu = $('ul.sub-menu' );

         subMenuLink.click(function(e) {
           e.preventDefault();
           $(this).siblings(subMenu).toggleClass('visible');
         });
      }
   }
   submenuCollapse();
   $(window).resize(submenuCollapse);
});

And following under Custom > CSS in the Customizer:

@media (max-width: 979px) {
   .x-navbar .x-nav ul.sub-menu {
      display: none !important;
      visibility: hidden !important;
   }
   .x-navbar .x-nav ul.sub-menu.visible {
      display: block !important;
      visibility: visible !important;
   }
}

Hope this helps. 🙂

Thank you.

[Michael FParticipant]

Hi,

You are brilliant!

Thank you so much for all your help,

Michael

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[Michael FParticipant]

Hi,

Sorry to be the bearer of not so good news. The mobile sub-menu is not consistently working.

The client has just emailed me with the following message and I have confirmed it as being correct on my Samsung S3. I must admit thought I has to persist in testing the menu out for a while before it happened. I asked him to detail the occasions when the mobile sub-menu was not working.

……………………………….

We are only using Android smartphones.

The strange thing is that it is not consistent, sometimes it works and sometimes it doesn’t.

Some of the glitches are:

· Sometimes Architecture is open, Performance Design won’t open

· Sometimes a project won’t open

· Sometimes no projects will open

· Sometimes can’t close the main category like Performance Design

· Sometimes we open Architecture and Performance Design; and then it stalls and no Submenu opens

· Sometimes a submenu won’t close

· Sometimes it works perfectly for a while, then kind of freezes or has only partial usability

Ultimately it eventually always gets stuck.

…………………………………………………………………………….

Are you able to find any reason why this would happen?

Thanks for being so helpful,

Michael

[ZeshanMember]

Hi Micheal,

Thank you for writing in!

You can try using this code instead under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
   windowsize = $(window).width();
   if(windowsize < 980) {
      var subMenuLink = $('.x-navbar a.sf-with-ul'),
          subMenu = $('ul.sub-menu' );

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

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer, or look into service like Elto or WerkPress. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[Michael FParticipant]

Hi,

Sorry for getting back to you so late.

I just want to thank you again for all your fantastic help.

Your latest custom JavaScript has worked a treat! Everything is working really well thanks to your expert knowledge and help.

Much appreciated,

Michael

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[Iain MParticipant]

Hi Support,

you referred me to this post, can you advise – does the last javascript code suggested on Oct 3 still require the css code added too…?

or does it work on it’s own…

thanks,

Iain

[ZeshanMember]

Hi Lian,

Yes, you need to add the CSS code provided in post number #116222

Cheers!

[Iain MParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Lain,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Author]

Posts