Hide navbar in Lightbox mode

Dear webflow community

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?

Thanks for your help!
Christoph


Here is my site Read-Only: https://preview.webflow.com/preview/anwesen-greiffensee?utm_medium=preview_link&utm_source=dashboard&utm_content=anwesen-greiffensee&preview=a9777bb00b5e4255697ea4002e657f67&mode=preview

Here is my published link: https://anwesen-greiffensee.webflow.io/

1 Like

I am having this exact same issue. Were you ever able to resolve it?

Did anyone help you with this, or able to get it sorted? As I’m having the exact same issue now and can’t work out how together round it!

Thanks

James

Hi James

Unfortunately nobody replied to me in this issue.

Best, Christoph

Most likely a z-index issue can you share the website to take a look?

put the lightbox on relative position and make its z-index higher then the nav menu. it solved the problem for me. (:slight_smile:

Webflows Lightbox has a default z-index of 2000. You’d want your navbar to have a lower z-index to not experience any interferences.

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”):

.navbar.page-padding.is-hidden{pointer-events: none;}

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.