Essential Grid Problems

Support
#1

Hi there!

We have a gallery that we’re currently building using Essential Grid. It’s coming along alright, but there are three big problems that I’m encountering that are making life difficult.

1) The first and biggest issue is that the Essential Grid gallery isn’t showing up after updating Pro. I suppose we’ll need to figure that out before you’ll be able to address the next two points.

2) The second one is that the lightbox’s z-index opens under our Superfly menu, which makes it difficult to close the lightbox. I imagine this is an easy enough fix, but I’m not sure exactly how it would work.

3) The third issue I’m trying to fix is that some of the media in the gallery are still images that need to open as videos. The first two images in the gallery are examples of this.

I can achieve this through opening up a youtube video (position 1 in the gallery), but it looks awful, doesn’t autoplay, and then seems to make the closing the lightbox issue even harder for some reason. I’d much prefer for it to open a self-playing, self-hosted video (position 2 in the gallery), but as of right now it doesn’t even summon the video file.

Once I have these two issues worked out, we should be good to go :slight_smile:

Thanks in advance!!

#2

Hello @Nuera,

Thanks for writing in!

Your issues seems interconnected. We must first resolve issue number one before going to other issues. The Essential Grid is not showing because there is a JS error on the page. It is coming from the custom html code added in one of the raw content element which happens to be inside the global block.

This error could be coming from a plugin conflict or from the actual html code. Where did you get this code? Please ask support from the creators of this code to be able to get rid of this JS error which has affected the Essential Grid.

Please let us know how it goes.

#3

Hey there!

Sorry- could you tell me which element you’re referring to? I can’t identify it from the screenshot and I tried removing all of the JS from the page and nothing seemed to bring the Ess Grid gallery back.

#4

Hi @Nuera,

1.) In your Section Hero - Desktop, there is a global block that you have added. Anyways, I have duplicated your home page and removed the global block which you can check it here: https://2019.nueramarketing.com/home-copy/

2.) For your issue #2: I am not sure if this is an issue. When I load the lightbox and the SuperFly Menu, I am seeing this:

3.) To play videos in your lightbox, please check this documentation:

Hope this helps.

#5

Thanks RueNel!

I’m having one of our developers look back into issue #1, so I appreciate you isolating that for us.

For #2, I’m looking to have the lightbox over the SuperFly menu. We don’t want SuperFly to be accessible while a lightbox is open. I imagine this is just adjusting the z-index of the two functions, but I’m not sure how to achieve that.

For #3, I’ll take another stab using that link you provided. Thanks so much!

#6

Hi @Nuera,

It will not work even if you change the z-index. The z-index will only work on elements covering each other. With SuperFly, it’s beside the layout and pushes it as expand, it’s not covered by the lightbox since it’s pushed as well.

How about changing your SuperFly menu behavior to Slide In instead of Push Content?

Then we’ll test if z-index will work with that setup.

Thanks!

#7

You mean, we can’t cover the menu button itself with a lightbox? I’m not concerned about the off-canvas menu, I just want the lightbox to appear over the toggle button itself.

#8

Hi @Nuera,

Ah, thanks for the clarification, in that case please add this CSS to your Theme Options > CSS

.envirabox-container {
    z-index: 999999999 !important;
}

Cheers!

#9

So that didn’t quite work, should we perhaps adjust the index of the toggle button in SuperFly too?

For reference, if you click on the first item in this gallery you can still see the SuperFly button when you open the lightbox:
https://2019.nueramarketing.com/home-copy/#recent-work

#10

Hi There,

Please update the previous CSS to this:

.envirabox-container,
.esgbox-container {
    z-index: 999999999 !important;
}

Let us know how it goes!

#11

Perfect, thanks!!

I’m going to start working on the other issues now and I’ll get back with you if I run into any other questions.

Thanks again!!

#12

If you have any questions, feel free to create another ticket :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.