Home Forums Event Espresso Premium Event Espresso EE3.1.37.3 Conflict With Layers Theme on ipads/iphones

Event Espresso EE3.1.37.3 Conflict With Layers Theme on ipads/iphones

Posted: May 23, 2015 at 10:42 am

Richard Duncan

May 23, 2015 at 10:42 am


Layers Theme conflict with Event Espresso

When only Event Espresso is active and Theme layers 1.1.4 are active, then embedded YouTube videos will not play on iPad/iphones.

However, the videos play fine on windows machines and android devices.

While Event Espresso is active and while the videos will not play on ipads and iphones, I switched to theme Twenty Fifteen and then videos play fine.

The issue returns when switching back to Layers Child theme or Layers main theme while Event Espresso is active.

The issue is only on iPADs/iphones.

I tested both parent and child theme to be sure the issue was not just child theme related and both exhibit the conflict with Event Espresso.

Can you help identify what in Event Espresso is conflicting?

I have also reported this to the Layers Theme Developers.

You can view the development site where issue is present
viewing password: comedy


May 25, 2015 at 2:39 am


So EE plus the default theme and everything works? Have you spoken to the Layer theme support regarding this at all?

Can you clarify, does this happen if EE is de-activated but the Layers them is still active? (I didn’t see you mention that in your post).

How did you embed the video? Did you use the “old embed code” or the URL or the iframe code?

Richard Duncan

June 1, 2015 at 3:29 pm

Hi Dean,

We are using the new .be urls for YouTube and pasting them directly in the WordPress editor which converts them to embeds.

We paid a developer to sort out the issues and modifications were required to different files to solve the ipad/iphone menu and YouTube embed issues.


/*.ui-widget :active { outline: none; }*/


if (!(“ontouchstart” in document.documentElement)) {
document.documentElement.className += ” no-touch”;

jQuery(function($) {

* Apply fix to main menu for dropdowns on mobile devices without the hover state

$(‘#menu-main-menu-1 > .menu-item-has-children > a’).on(‘click touchstart’, function (e) {
// Check sub menu state
var subMenu = $(this).next(),
parent = $(this).parent();

if(!$(document).hasClass(‘no-touch’) && subMenu.css(‘opacity’) == 0) {
// Display sub menu
$(‘#menu-main-menu-1 > .menu-item-has-children’).removeClass(‘hover’);

return false;
else {
return true;


$(document).on(‘click touchstart’, function (e){
if(!$(‘.menu-item-has-children’).length) {


/* Dropdowns for touch devices */
.nav li.hover > .sub-menu {
visibility: visible;
opacity: 1;
top: 40px;
transition: all 0.2s ease-in-out;


June 3, 2015 at 4:20 am


Glad to hear you got it resolved. I did some tests just to make sure, and didn’t come across any issues with the .be embeds and default WP themes, so it must be localised to that theme.

As such, thanks for sharing the fix!

The support post ‘Event Espresso EE3.1.37.3 Conflict With Layers Theme on ipads/iphones’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3 Documentation for Event Espresso 4

Status: closed

Updated by  Dean 5 years, 2 months ago ago

Topic Tags


This topic is: not resolved
Do NOT follow this link or you will be banned from the site!