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:
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;
}
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;
}
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.