Меню гамбургера открывается, но ссылки не являются кликами, а фон темнеет [закрыто] ⇐ Html

[Anonymous]

Я создаю адаптивное навигационное меню для своего сайта. Гамбургер-меню открывается корректно и затемняет фон, но я не могу нажать ни на одну ссылку внутри меню. Щелчок в любом месте снаружи закроет его. Он доступен по адресу http://testingpf.great-site.net/


Я попробовал изменить CSS и JavaScript. Я много работал, но так и не смог найти ошибку и исправить ее.
Ожидается: я смогу щелкать ссылки, когда меню открыто.
Факт: меню открывается, но ссылки недоступны; закрывается только тогда, когда я нажимаю снаружи.
Что мне не хватает? Это проблема z-index или многоуровневой структуры?

Код: Выделить всё

const toggle = document.getElementById('navToggle');
const nav = document.querySelector('.main-nav');
const overlay = document.createElement('div');
overlay.className = 'nav-overlay';
document.body.appendChild(overlay);

toggle.addEventListener('click', () => {
nav.classList.toggle('nav-open');
overlay.classList.toggle('active');
});
overlay.addEventListener('click', () => {
nav.classList.remove('nav-open');
overlay.classList.remove('active');
});< /code>
.main-nav {
position: fixed;
top: 0; right: -100%;
width: 320px; height: 100vh;
background: #fff;
transition: right 0.3s ease;
z-index: 1000;
}

.main-nav.nav-open { right: 0; }

.nav-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(11,42,74,0.5);
z-index: 999;
display: none;
}

.nav-overlay.active { display: block; }

Код: Выделить всё

[url=/]
[img]assets/img/profile.jpg[/img]

Zohaib Ashraf Noori
Accounting • Islamiat • Pakistan Studies

[/url]


[url=/]Home[/url]
[url=/about]About[/url]
[url=/notes]Notes[/url]
[url=/classes]Classes[/url]


☰

Подробнее здесь: https://stackoverflow.com/questions/797 ... nd-darkens