Flatsome compatibility: depend Lightbox Icon Z-Index based on Magnifier zIndex

  • Resolved tobiaswinter

    (@tobiaswinter)


    1 month, 3 weeks ago

    I have the Flatsome theme, and the Icon to open the Lightbox overlaps the dropdown menu of the horizontal main menu bar (when opening the dropdown).

    I’ve found the Icon uses zIndex 1010, while the Flatsome menu uses 1000.

    When I reduce the SVI Setting “Custom zIndex for Magnifier” from 1000 to 800, the Icons zIndex doesn’t adjust, it stays at 1010. I suggest to calculate the Icons zIndex with an offset based on the Magnifiers zIndex, so in this example, it would be 810 and this would be fine with the flatsome menu.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author RosendoLabs

    (@drosendo)

    1 month, 3 weeks ago

    Hi there,

    Thanks for reaching out and for the detailed feedback.

    I’ve tested this on a clean Flatsome installation using the default menu settings, and I wasn’t able to replicate the overlap on my end. However, since every site configuration is a bit different, you can easily override the icon’s depth to sit behind your menu.

    You can force a lower z-index by adding this snippet to your Custom CSS:

    CSS

    span.sviLightgallery {
    z-index: 999 !important;
}

    I’ve added the !important flag to ensure this takes priority over the default styles. This should tuck the icon safely under your menu’s level of 1000.

    Let me know if that does the trick for you!

    Thread Starter tobiaswinter

    (@tobiaswinter)

    1 month, 3 weeks ago

    Thanks for testing. It’s unclear to me why flatsome behaves different. Your custom CSS works when I adapt it to the typo in the class definition, it has to be span.sviLigthgallery – then it works 😉

    I still think it would be more elegant to let it depend on the Custom zIndex for Magnifier setting, so less custom CSS is needed, but anyway – it works and thanks for the fast response, again 😉

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.