Superfly and Envira issues

Support
#1

Hello,

Hoping someone can help me figure out a couple issues I’m having with these two plugins. I’m using Superfly as my primary navigation (hidden X’s), and it’s all good except for on my gallery page…

  1. Scrolling down once on the Envira gallery page renders the Superfly menu items mostly useless (when staying still, prior to any scroll down, they work). The logo image remains clickable, but the menu links suddenly do not click/go to their given page. When testing this issue on mobile, the menu icon does not fly out.

  2. Likely a part of that same underlying issue, when one clicks a gallery image to pull up it up in lightbox, the left hand navigation is hidden behind Superfly.

Here’s the link: https://bit.ly/2oWMkw8

Any ideas how to fix this? I’d like to keep the gallery looking the same, with the images filling the entire white space.

Thank you in advance!

Edit to add: I also seem to be having a ton of issues with Superfly on mobile. It just doesn’t seem very responsive… The logo is either too large or too small when the submenu is opened, the social icons and submenu get cut off and when trying to scroll the menu in an attempt to get to these cut off items, one first has to scroll all the way down the page - or be on a short page - before the superfly menu scrollbar is activated.

I really wanted this plugin to work, but it seems to be giving me a host of problems. It looks lovely on desktop, but jeeze. Starting to get fed up with nearly every bundled plugin I’ve tried using on X.

#2

Hi Julie,

The page in question seems to be loading very slow, and the Javascript code execution time is very slow. I think that is the underlying cause of all the issues that you are experiencing, and the main reason is having that many big images loaded in the gallery.

I checked the Google Chrome Developer toolbar and found out that the images are ranging from 2MB to 300KB, which is very big and not suitable for the web use:

To test the theory, please kindly create a gallery with a maximum of three images and use these three smaller images:

  • wp-content/uploads/2017/11/teatime_pot_SM_sig-1024x1024.jpg
  • wp-content/uploads/2017/05/Wanderer_SIG-748x1024.jpg
  • wp-content/uploads/2017/11/Firedagger-696x1024.jpg

Then, check the result and see if the page is loading better or not and if you experience the same problems or not. If it fixes the issue, then you will need to make the images smaller and use fewer images than the current setup. You can have multiple pages, for example, and divide the images to groups and show on those pages, for example.

If you want to read more on performance and how to use technics to reduce the image sizes, please read this article.

Thank you.

#3

Hi Christopher,

I appreciate the suggestion, but I think the issue is more related to a div layer conflict.
However I did create a test gallery with the images as you mentioned, and I do still experience the same problems (although the menu link issue is harder to reproduce on the test, as it’s not a long enough page to scroll).

I should have clarified in my edit that the additional problems I mentioned there are also happening outside of the gallery page. Though the main two problems are confined to the Envira gallery.

I definitely have a performance issue though, which I am currently working on and thanks to your tip off I’ll be replacing those images with ones better suited for web. But again, the issues with Superfly still stand.

#4

Hi Julie,

I can confirm Christopher’s reply idea above. The page is slow. Yes, when I scroll the link doesn’t work right away when click, but when you wait a few seconds, when gallery is loaded the link works. It is somewhat related to the performance issues.

By default, Superfly fixed left menu tries to be on top of everything. On this case where you want the image lightbox over it, we can adjust current CSS z-index value.

.envirabox-container {
    z-index: 9999999;
}

Look here: https://screencast-o-matic.com/watch/cq63QGu5kB

Regarding the logo size on mobile, we might need to see your setup. Please share credentials inside a secure note.

Hope this helps.

#5

Thank you, I got the lightbox displaying correctly now.

I’ve gone through and replaced all my gallery images with web-optimized files ranging from 130 to 210 kb - any lower I found they looked unpresentable. While the gallery does load much faster now, I still encounter the unclickable menu links upon scroll down (even with the page fully loaded). ):

I appreciate all the help, thank you both.

#6

Hi Julie,

Regarding the logo size, there’s no size set on settings. I tried to add 150px. You may adjust to your preferred size:

For mobile logo size, try adding this custom CSS on Superfly > Advance TAB > Additional CSS. Adjust the values as needed.

@media screen and (max-width: 782px){
.superfly-on #sfm-mob-navbar {
    height: 100px;
}
#sfm-mob-navbar img {
    height: 90px;
}
}

When I check menu link issue after scroll, it seems normal here already. Not much delay. I would suggest to add CDN on your images and visit the performance article suggested by Christopher above. Thank you.

#7

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