I wonder if someone can help me with the following. I have some fotos in a lightbox. When I click on the foto the lightbox mode opens up and I have a nice fullscreen view of the pictures, exept that the navbar is still showing and covers a part of the picture.
I also can’t escape from the Lighbox mode by clicking the “x” in the right upper corner because it is covered by the navbar. Does anyone know how to hide the navbar in the lightbox mode?
Hello, you can achive this using some simple custom code.
First we need to add a class “is-hidden” to the navbar. You should configure it as a combo class in the webflow editor. Add your bewished styles there: opacity 0, …
Than add a opacity-transition the the nav - without the “.is-hidden”. This step is optional but makes the animation a lot more smooth.
Afterwards add this into your “before /body”:
let hasClickListenerBeenAdded = false;
function addCloseClickListenerWithDelay() {
if (!hasClickListenerBeenAdded) {
hasClickListenerBeenBeenAdded = true;
setTimeout(function() {
$('.w-lightbox-close').on('click', function() {
$('.navbar').removeClass('is-hidden');
});
}, 500); // Delay of 500 milliseconds before attaching the event listener
}
}
$('.your-lightbox-link-class').on('click', function() {
$('.navbar').addClass('is-hidden');
addCloseClickListenerWithDelay();
});
This adds 2 events listeners responsable for activating / deactiving the class.
Last but not least, add this to one of your custom code css styles (I recommend “inside head”):
this makes it that you can’t click the nav when it’s hidden. So that you can close the lightbox.
Hope this helps!
David
Edit: my previously posted code didn’t work properly, since the “.w-lightbox-close” was only generated by webflow after we tried to append the onclick event to it.
Final edit: I first didn’t see a solution so I came up with this. I know also use z-index however if someone needs to also trigger a function or further custom code, this solution could help.