Почему флажок становится неактивным при уменьшении ширины? ⇐ Javascript

[Anonymous]

Это незаконченный дизайн веб-сайта, над которым я работал. Проблема в том, что когда я уменьшаю ширину браузера, появляется тройное тире, но по какой-то причине флажок становится недоступным. Я пробовал разные вещи, такие как увеличение z-индекса и тому подобное, но это просто не работает. Как заставить это работать?

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

let icons = document.querySelector("#icon");
let menu = document.querySelector(".menu");
window.addEventListener("resize", () => {
if(window.innerWidth < 800){
menu.style.opacity = "0";
icons.style.opacity = "1";
} else {
menu.style.opacity = "1";
icons.style.opacity = "0";
}
} )

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

body {
display: block;
margin: 0;
font-family: Arial, sans-serif;
}

.top {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightblue;
height: 60px;
}

.name {
font-size: 28px;
font-weight: bold;
color: white;
padding: 15px;
}

.menu {
display: flex;
gap: 20px;
margin-right: 20px;
transition: all 0.3s ease;
opacity: 1;
}

.menu a {
font-size: 21px;
color: white;
text-decoration: none;
padding: 4px 8px;
border: none;
background-color: transparent;
}

.links {
text-decoration: none;
color: white;
padding: 4px 8px;
}

.links:hover {
color: lightblue;
background-color: white;
transition: all 0.3s ease;
border-radius: 4px;
}

.bottom {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 60px);
}

.bt {
font-size: 40px;
color: cadetblue;
}

.bt::selection {
background-color: lightblue;
color: white;
}

.name::selection {
background-color: white;
color: lightblue;
}

.fas.fa-bars {
background: none;
font-size: 28px;
color: white;
cursor: pointer;
border: none;
}

#icon {
position:fixed ;
right:10px;
top:17px;
opacity: 0;
transition: opacity 0.3s ease;
}

.sidebar {
position: fixed;
height: 100%;
width: 300px;
background-color: white;
display: flex;
flex-direction: column;
box-shadow:  0 0 10px grey;
}

.sidetop {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightblue;
height: 60px;
width: 100%;
}

.fas.fa-xmark {
color: white;
font-size: 28px;
}

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

Blank Space


[i]
[/i]
[i][/i]




Home

About

Services

Contact

Blog





Blank Space

Home
About
Services
Contact
Blog



A Place which is emptier without you

Подробнее здесь: https://stackoverflow.com/questions/798 ... is-lowered