Main navi tablet/mobile mode / jquery issue

Hi Vlad,

Happy new year!

I use the great moesia pro now for years. Currently, the navi ist unfolded, means all main and sub links are visible. That is intended and ok. In tablet mode the sublinks are NOT clearly accessible since with every mouse hover the navi scrolls somehow (@media < 900, once navi has changed to tablet/mobile mode). I switched off all plugins. Problem still remains.

License is up to date again.
Theme is updated, Rel. 1.67.

Very newest information to this: We installed “Enable jQuery Migrate Helper” plugin from Wordpress and downgraded the jQuery version to 1.12.4 and the problem vanished. This seems to us, that there is something to do in the .js scripts of the Moesia Pro Theme. Currently the downgrading is in production, so you won’t see the issue.

If you like or need, I can give you access to my staging site without activating the jquery migrate helper plugin, so that you might see and explore the issue directly.

Please let me know whether my findings are correct and what is to be done on my resp. your side?

I appreciate any help.
Site: denkerprise.de
and: knutmenzel.de
WP: Release 5.6

Regards, Knut

Hi Knut,

I checked both sites, and I can’t replicate the issue. The main navigations of both websites are working fine. Here are the screen recordings when checking.


Regards,
Kharis
aThemes Support

Hi Kharis,

Thnx for your very quick answer!! As I told, I switched on the jquery migrate helper which downgrades to jQuery version 1.12.4. So on production the issue is currently not visible, since it is production :wink:

Now, it seems, that you have no further knowledge about the issue, so I would like to open staging.knutmenzel.de and staging.denkerprise.de for you.

To which address should I send the credentials (user, PW)?

Regards,
Knut

Hi Kharis,

I would like to ask when do you think you will be able to provide the information of how to send you the credentials to the staging site (user, password)?

Have a great day,

Regards,
Knut

Hi Knut,

I just sent you a direct message and you can securely share the login credentials by replying my message.

Regards,
Kharis
aThemes Support

Hi Kharis,

When it is possible to get an answer to the open ticket? I would very appreciate to get a solution soon, at least a timepointer when an appropriate update will be abailable.

Have a great day,
Knut

Hi Knut,

Seems likely you haven’t yet responded my private message.

Please visit the below link, in case you haven’t yet been notified.

https://forums.athemes.com/t/re-main-navi-tablet-mobile-mode-jquery-issue/41582

Regards,
Kharis
aThemes Support

Dear Kharis,

I replied to your mail on Tue 5 January to team@athemes.com via mail reply and today again directly to team@athemes.com. Maybe it is possible for you to check your spam filter. In case it is not possible to receive my email we might think about an alternativ way to change the credentials.

Regards,
Knut

I can’t see your email in our inbox anywhere. You can DM Kharis maybe.

Dear Kharis,

You got now 4 e-mails from two different users (mail@knutmenzel.de and liveknut@gmx.de). I did not get any error message or bounce backs from the mail services. I replied directly to your email and sent the e-mail to team@athemes.com directly.

From my side I don’t have any further idea to come in contact with you. Please tell me or call me so that you are able to work on my inquiery.

It is now more than a week ago, since I posted the inquiery. It would be so great to get a step further in this ticket.

Thnx so much for your support.
I am looking forward hearing from you.
Knut

Mail@knutmenzel.de
Liveknut@gmx.de
+4915251517270

Hi Knut,

I have just sent you an email to mail@knutmenzel.de. Can we continue helping you over email channel since we can’t offer a voice call support due to several reasons?

Please let me know in case you haven’t yet received my email.

Have a nice weekend!

Regards,
Kharis
aThemes Support

Dear Kharis,

There are now 13 days ago and unfortunately there are no news, nor any mails available from your side. Also direkt email communication seems not to be a reasonable way of communication.

This makes me disappointed at all. I hope that you are well. It would be so great to get any well and alive message from you.

I am really suprised of this kind of service, since this situation I had never before with aThemes, and I am customer since years.

What can I do?
Can anyone give me an advice how to proceed?

Keep well,
Knut

Hi Knut,

​Please accept my apologies for the delay in response. I really appreciate your patience.

I am sorry, I missed your email. I checked the credentials are now invalid. Can you renew them and sent again to kharisblank@gmail.com?

Regards,
Kharis
aThemes Support

Ok.

You got new credentials to your private mail today for both sites.

Looking forward hearing from you.

Regards,
Knut

1 Like

Dear Kharis,

It is again a couple of days ago. Can you please give an estimate when to answer. You now have full easy access: two sites, same error, two login credentials per site.

Looking forward hearing from you sooooon.

Regards, Knut

Dear Dr. Knut,

I just wrote you over email support. Please let me know if you haven’t yet received it.

Regards,
Kharis
aThemes Support

Hi Kharis,

Thanks for your time working on my issues. It is working now, due to the fact you have collapsed the complete menue.

  1. Where did you insert the code? Within the CSS section I can’t find anything.
  2. In case you edit the theme code, will it be also available in the next theme update?
  3. As far as I see now all menue entries collapse (only the main entries on the upper level are visible), how is it possible to have the full menue uncollapsed in tablet and mobile format (so I would like to see all (!) menue entries)?

Thnx for your support,
Knut

Hi Dr. Knut,

1

I added the code to Appearance > Custom JavaScript.

2

Yes, theme update won’t remove the code.

3

If I could get it right, you’d add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px) {
      .menu-item-has-children {
        position: relative;  
      }
      .menu-item-has-children ul {
        height: 100% !important;
      }
    }

Let me know whether it helps or not.

Regards,
Kharis
aThemes Support

Hi Kharis,
thnx for your help so far. Here is my feedback.

1. Function of added code to Appearance > Custom JavaScript:
For knutmenzel.de it functions properly under jquery migrate “Standard WordPress”.
For denkerprise.de it does not (!) function.
Cache has been cleared (same browser).

2. Additional Appearance > Customize > CSS from dashboard:
Does not function for both sites.
It has been added on site knutmenzel.de just at the beginning.
Cache has been cleared.

Result: Navigation has no childs visible until I click on the father link.
Before: Navigation father and childs were all visible for all father links (this I would like to have again)

Maybe you can have a further look.
That would be great.

Hi,

I added this code into the existing custom JavaScript.

    $(this).click(function(){

       $(this).next('.sub-menu').classToggle('open-sub-menu');

       return false;

    });

So the final code looks like this:

    ;(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;

            });

            /* Additional script */
            $(this).click(function(){

              $(this).next('.sub-menu').classToggle('open-sub-menu');

              return false;

            });
            /* Additional script ends */        
            
          });
        }

      }

    })(jQuery);

and also added this CSS code to staging.denkerprise.de’s Additional CSS.

   @media only screen and (max-width: 991px) {
      .menu-item-has-children {
        position: relative;  
      }
      .menu-item-has-children ul {
        height: 100% !important;
      }
   }

Now you should get the sub menu to look like this on mobile screen.

Let me know whether it is what you want to have or not.

Regards,
Kharis
aThemes Support