Hi, I’m having the same problem described in this post:
The OP never followed up, so I’m picking up where they left off. When I click an image link that opens up a lightbox everything on the site moves to the right, except for my navbar & footer.
Here’s an example of the problem: Screen Recording 2021-01-01...
This issue is showing up in Chrome, Firefox & Safari. All three are updated to the latest builds.
Any guidance is appreciated, thanks!
Welcome to the community @tre4!
This is a byproduct of how lightbox is changing the page below the modal to prevent the user from unintentionally scrolling to another area of the webpage below. When the modal is opened there is a
.w-lightbox-noscroll class that’s added which changes the page from it’s default overflow to
overflow: hidden—removing the space taken up by the page scrollbar:
It’s possible that there may be a hack, whether using custom code or a data attribute, that will disable the class from applying on a lightbox—but obviously this isn’t necessarily the best fix as it could negatively impact UX. If the page itself was not scrollable by default (let’s say it had a height of 100vh) then you wouldn’t notice the shift at all since there wouldn’t be a scrollbar taking up horizontal space. Similarly, if your a MacOS user who chooses to hide the scrollbar unless a page is being scrolled, this shift wouldn’t happen as the scrollbar is overlaid on top of the site content—rather than taking up physical space.
Hopefully that helps shed some light on the shifting, and while I agree it may be a bit “janky” looking it’s functioning as expected and not necessarily an issue with how you’ve built the site.