Warum kann das Kontrollkästchen nicht angeklickt werden, wenn die Breite verringert wird? ⇐ CSS

[Anonymous]

Dies ist ein unvollständiges Website-Design, mit dem ich gearbeitet habe. Das Problem besteht darin, dass, wenn ich die Breite des Browsers verkleinere, der dreifache Strich erscheint, das Kontrollkästchen jedoch aus irgendeinem Grund nicht mehr angeklickt werden kann. Ich habe verschiedene Dinge ausprobiert, wie zum Beispiel den Z-Index zu erhöhen und so weiter, aber es funktioniert einfach nicht. Wie kann ich dafür sorgen, dass es funktioniert?

Code: Select all

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";
}
} )

Code: Select all

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

Code: Select all

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