JS Overlay Menu Not Showing

Question

I would like to display this full screen overlay menu (which works great) on my web page, on the top left hand side. My code so far can be seen here .

When I click the overlay menu, it seems to be 'hidden' behind the main page content.

I changed some of the z-index values for the overlay menu, but when I did this the main page navigation (element called slick-dots ) stopped working (visible but not clickable).

When the overlay menu is open, the navigation ( slick-dots ) should be hidden. However when the full screen menu is closed, the navigation should be visible and work.

I'm not sure how I should configure the z-index or position values in order to achieve what I want?

Any help with this would be appreciated.

Answer 1

With the z-index solution you mentioned, you couldn't click your slick-dots nav because when you use visibility: hidden instead of display: none , the element is still there, taking up space on top of everything else, intercepting mouse events. You can use pointer-events: none along with visibility to let hovers and clicks fall through it.

.nav {
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
}

body.nav-active .nav {
  visibility: visible;
  pointer-events: auto;
}

Here's a Pen of it working. pointer-events only works in IE11, so if you need to support IE10 you'll have to add some sort of workaround.