Tengo un problema con una web y no sé por que no se despliega el menú hamburguesa. Supongo que falta algo de código. cuando aprieto el checkbox y no despliega el menú, no se como hacer que funcione, necesito una corrección o explicación, tiene SCSS
<nav class="index-nav">
<input type="checkbox" id="check">
<label for="check" class="hamburger-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="nav-list">
<li class="nav-list__item"><a class="nav-list__txt active" href="index.html">Inicio</a></li>
<li class="nav-list__item"><a class="nav-list__txt" href="pages/quienessomo.html">Quienes Somos</a></li>
<li class="nav-list__item"><a class="nav-list__txt" href="pages/resena.html">Reseña Historica</a></li>
<li class="nav-list__item"><a class="nav-list__txt" href="pages/ideario.html">Ideario</a></li>
<li class="nav-list__item"><a href="pages/oferta.html">Oferta Academica</a></li>
<li class="nav-list__item"><a href="pages/contacto.html">Contacto</a></li>
</ul>
</nav>
Necesito una correcion
.index-nav {
.menu-btn {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #531919;
height: 52px;
.hamburger-btn {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
#check {
display: visible;
&:checked ~ .nav-list {
background: green;
min-height: 100vh;
li {
visibility: visible;
}
}
}
}
.nav-list {
background-color: $almostgray;
font-size: 2rem;
padding: 8px 0px;
display: flex;
justify-content: center;
}
.nav-list__item {
position: relative;
display: inline-block;
margin: 0 10px;
padding: 0 10px;
}
a {
color: $lightgray;
&:hover {
color: $lightred;
padding-bottom: 8px;
}
}
.nav-list .nav-list__item:hover ul {
display: block;
}
}