My overlay is not disabling user action properly

I want my overlay to disable the user from triggering the dropdown menus when hovering over nav bar or clicking on links in nav.

I tried changing z-index but that’s not working. What do you suggest?


Here is my site Read-Only: Link
(how to share your site Read-Only link)

Hi

You didn’t elaborate - hope I got you :slight_smile:

You’re right! I didn’t explain anything. When you press the search icon in the right corner of the nav, it opens that search overlay on the screen that’s visible in the designer but not on preview. When it was on the screen I could still play around with the nav section, but what you showed me was I just needed to increase the z-index substantially. So I just increased it to 990 basically.

If changing the z-index property didn’t solve the issue of your overlay not properly disabling user actions, there are a few other approaches you can try:

  1. Pointer Events: You can try using the CSS pointer-events property on your overlay element. Set it to “none” to disable pointer events on the overlay, allowing the underlying elements (such as dropdown menus and links) to be clickable. Here’s an example:

cssCopy code

.overlay {
  pointer-events: none;
}
  1. Transparency: Instead of completely disabling pointer events, you can make your overlay semi-transparent or translucent so that users can see the content underneath but cannot interact with it. You can adjust the opacity using the CSS opacity property. For example:

cssCopy code

.overlay {
  opacity: 0.5;
}
  1. JavaScript Event Listeners: If the above CSS solutions don’t work, you can consider using JavaScript event listeners to explicitly disable or prevent specific actions on the targeted elements. You can capture events like click or mouseover and prevent their default behavior when the overlay is active.

javascriptCopy code

const overlay = document.querySelector('.overlay');
const navLinks = document.querySelectorAll('.nav-link');

// Disable click events on nav links
navLinks.forEach((link) => {
  link.addEventListener('click', (event) => {
    if (overlay.classList.contains('active')) {
      event.preventDefault();
    }
  });
});

Remember to adjust the CSS class names and selectors in the code snippets above to match your specific HTML structure.

By utilizing one or a combination of these techniques, you should be able to effectively disable user actions on the overlayed area and prevent interaction with the underlying elements.