My lightboxes don’t work properly on table & mobile when zooming in. When I zoom into an image in a lightbox, the image gets very small and partially hides behind the navbar.
I have tried all the “positions”, including “static” with no z-index and none fix the issue. Additionally, I can’t use “Static” with no z-index because then my menu button doesn’t work.
I have also made sure that there is no negative spacing associated with the lightbox and elements above & below.
I would appreciate any insight that you could provide. Here is the read-only link:
A lightbox creates an engaging way to showcase images or videos in a full-screen modal overlay. To ensure your lightbox works properly without navbar overlap issues:
The lightbox modal should automatically position itself with a z-index higher than your navbar, appearing on top of all other page elements. If you’re experiencing overlap issues, check these settings in your lightbox element:
Set Position to “Fixed” or “Absolute”
Adjust the Z-index to a value higher than your navbar (typically 999 or higher)
Ensure the Top, Right, Bottom, and Left positions are set to “0” for full-screen coverage
You can also customize the lightbox appearance by adjusting the thumbnail size, modal background color, and animation settings through the style panel.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Thank you very much! I appreciate your help! My challenge is that if I set a higher z-index for my lightboxes than for my navbar, then my menu button does not work because it’s below the lighbox. Is there a workaround for that?
Have a great day!
Hi - Pinch zoom into Webflow’s native lightbox images often causes display issues, it’s not really intended to be used in this fashion. If you need users to be able to zoom into images either don’t use the lightbox, or perhaps try a third party gallery plugin. Hope this helps.
Very good to know! Thank you for your response Craig! Have a great week.