Hello Günter,
thank you for the information.
I will do this and see if the WPML update will fix the problem.

Best regards,
zarlekin

I saw this problem after updating both WPML and Enfold to the latest versions.

Best regards,
zarlekin

Hi Günter,
thank you for looking into it and for your reply!

At first glance it looks like the problem is fixed, as the logoslider now shows up in the translation of the website page
See: https://www.haas-energy.com/en/energy-consultant-winfried-haas/

Yet if you take a look at the test pages the situation got worse :(
Because now all the avia builder images that are NOT in a logoslider don’t show up.

1 Page with different media elements (single image, gallery grid, horizontal gallery)
DE: https://www.haas-energy.com/medien-ohne-logoslider/
EN: https://www.haas-energy.com/en/media-without-logoslider/

Before the fix: The translation (EN) works fine. It shows all the images.
After the fix: There are no images in the translation.

Even if I create a page with only a single image, the image won’t show up in the translation.
DE: https://www.haas-energy.com/nur-bild/
EN: https://www.haas-energy.com/en/single-image-only/

2. Same page + LOGOSLIDER
DE: https://www.haas-energy.com/medien-mit-logoslider/
EN: https://www.haas-energy.com/en/media-with-logoslider/

Before the fix: There are no images in the EN translation.
After the fix: The images of the logoslider show up in EN but nothing else.
(And as this is the ONLY page where the link in the language switcher links to the ID (https://www.haas-energy.com/en/?page_id=6216) let’s first see if this behaviour remains if the problem with the images is fixed, before trying something else.)

Another observation:
After inserting the new logoslider.php file, automatically, without touching anything, the images on the test pages I created on June 26. didn’t show up anymore. Yet in older pages the images are still there. It’s like the images only disappear on pages created or saved with the new WPML/Enfold.

Best regards,
zarlekin

Hi Ismael,

thank you or you replay, but reselecting the logos in the original language (DE) and update the english translation in the WPML Translation Editor, doesn’t solve the problem.
And reselecting the images in the translated page via Avia Builder, also doesn’t solve the problem. Because the moment the client makes some text changes in the original page, updates the english texts via WPML Translation Editor and saves the translation, the logoslider will break again.

For you to see the problem more clearly I created two test pages and translated them vie WPML Translation editor.
(DE = original language | EN = translation)

1 Page with different media elements (single image, gallery grid, horizontal gallery)
DE: https://www.haas-energy.com/medien-ohne-logoslider/
EN: https://www.haas-energy.com/en/media-without-logoslider/

You can see, that the translation (EN) works fine. It shows all the images.

2. Same page + LOGOSLIDER
DE: https://www.haas-energy.com/medien-mit-logoslider/
EN: https://www.haas-energy.com/en/media-with-logoslider/

Here you can see, that the moment I insert a logoslider into the page the translated page breaks. Not only the images of the logoslider won’t show up, also the images of the other media elements won’t show up.
Another thing that you can observe is that if you are on the original language (DE) the link in the language switcher (english flag) goes to https://www.haas-energy.com/en/?page_id=6216 and not to https://www.haas-energy.com/en/media-with-logoslider/
It looks like the WPML Translation Editor can’t even save the translation properly if a logoslider is used on a page.

As far as I can see there is something really wrong with the logoslider that has to be fixed. Because all the other elements I tested work fine.
Could you please look deeper into this issue?

Thank you and best regards,
zarlekin

Hello Ismael,
thank you for your support.

1. I looked into funktions.php and saw that you didn’t replace the old script with this new one shown above but added this new script below the old one.
Is the old script necessary for the new one to work, or did you forget to delete it?
Because I testet the mobile menu with and without the old script in functions.php and the menu worked the same way.
Therefor I deleted the old script.
Was I right to do this? Or did I miss something?

2. I compared the new script in functions.php with the script you posted here and saw a little difference.
In funktions.php your script had a line showing
}, this), 200);
In the script you posted above it shows
}, this), 500);
I don’t know what that is, but I changed this line it in functions.php to match with the script you posted here.
Was I right to do this? Or did I miss something?

—-

The new script is a big improvement. It’s not perfect, as the close button jumps and there is no way to position it to match the exact position of the menu icon, but it’s something I can live with. So thank you for that.

Yet, the problem with the Performance Options “Load jQuery in your footer” remains.

If I check the option “Load jQuery in your footer” the script doesn’t work properly and I get the error message:

Uncaught ReferenceError: jQuery is not defined
at (index):481

Referring to the line:
})(jQuery);

As you didn’t answer to my questions regarding this issue, I have to repeat them:

1. Is there a way to implement the script via child theme, that works with the theme performance option to load jQuery in the footer?

2. Will you have this mobile menu bug fixed in the new Update?

As I said, I can’t believe this mobile-menu-overlapping-behaviour to be deliberately designed this way, I see it as a theme bug. And I assume that you will fix this bug in the next theme update in a way compatible with the option to load jQuery in the footer.

Best regards,
zarlekin

Hi Ismael,

previously I had deactivated

CSS file merging and compression
Javascript file merging and compression
Disabling of template builder elements

and emptied my cache. With no results.

Now I took another look at the performance settings and saw that I also had checked “Load jQuery in your footer”.
By deactivating the option “Load jQuery in your footer” the error message disappears and the script works.

But this poses a new problem.
As this mobile-menu-overlapping-behaviour isn’t a bug caused by compatibility problems with other plugins, but is a theme bug you can even see in your own demo (https://kriesi.at/themes/enfold-2017/) I assume that you will want to fix this bug in the next theme update.
However, you can’t do it in a way that forces the user to not check the option to load jQuery in the footer.
If the theme Enfold by itself causes errors when checking the option to load jQuery in the footer, the option is void.
You will have to find a way to fix the menu bug in your theme without causing problems in this option.

So I have two questions now:

1. Is there another way to fix the problem via child theme, that works with the theme option to load jQuery in the footer?
2. Will you have this bug fixed in the new Update? (Because as I said, I have other Websites using Enfold and if the new version has it fixed I would just wait for it to get out. Otherwise I would have to implement this script into every site and deactivate the performance option.)

Best regards,
zarlekin

Hi Ismael,
I inserted the new code. But nothing happens except I get an an Error in the Chrome developer console telling me Uncaught ReferenceError: jQuery is not defined linking to this line of your code

})(jQuery);

This bug fix is the only thing I need to finish the project and I am a litte bit short on time here. If it is possible for you to look into this soon, I would be very greatful!

Could you also tell me if this fix will be implemented in the next release? Because depending on it I would need to insert the code into all the other websites or just wait for the next theme update.

Best regards,
)|( ZIGGY

Hello Ismael,
do I have to insert this code snippet into functions.php in the child theme?
Because I did that and nothing changed.
I also cleared the cache of WP Super Cache not knowing if this could be an issue, but still nothing changed.

Best regards,
zarlekin

Hi John, I deactivated every single Plugin and it didn’t make a difference. But I found a good hint:
https://stackoverflow.com/questions/9420155/locally-installed-ttf-overrides-google-fonts

The fonts in Enfold are embedded like this:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
 <strong> src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');</strong>
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Note that the 600 font-weight says (‘Open Sans Semibold’). As this is explicit and I didn’t have this activated on my computer, there is no local font to get. But the 400 font-weight only says local(‘Open Sans’). There my computers seems to say: „Well I got an ‘Open Sans’ acitvated here, let’s just take it!” – regardless of the font-weight.
If I locally only activate Thin 300 or Semi-Bold 600 that’s what the website takes for ‘Open Sans’.

Could you check this for yourself? And if this is the issue, if there is a way to fix it.
(The website I showed above, where I don’t have this problem, doesn’t has this line with the local-fonts in the code.)

Thank you!

Hi Eliott, thank you for the quick answer. So I just reduced the size of the tooltip in the Quick CSS to avoid cropping.
Best regards, zarlekin