estoy intentando un menu hamburguesa pero este al abrir no tapa al texto de atras, probe con opacity e index pero no lo puede tapar al titulo que esta debajo de el. Despues estoy teniendo problemas en que el nav hamburger haga la cruz que debe hacerse cuando se abre. Realmente no se si es un problema de como sass esta leyendo y traduciendo en css pero no puedo ejecutarlo. Tengo la obligacion de que esto solo deba realizarse en css y html. las preguntas serian como puedo mejorar como esta el menu al hacerse la cruz y como hacer que ul al expanderse pueda tapar al texto de abajo?
```` @media (min-width:320px) { body {
margin: 0;
padding: 0;
}
header {
width: 320px;
height: 80px;
z-index: 3;
}
header .container_logo {
position: relative;
top: 0;
width: 320px;
height: 44px;
white-space: nowrap;
}
header .container_logo .logo {
position: absolute;
top: 10px;
left: 16px;
width: 24px;
height: 24px;
}
header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: blue;
}
header ul li a {
color: white;
font-family: "IBMPlexSans",sans-serif;
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.menu {
clear: both;
max-height: 0;
height: 800px;
width: 300px;
-webkit-transition: max-height .2s ease-out;
transition: max-height .2s ease-out;
}
.menu-btn {
display: none;
}
. menu-btn:checked ~ .menu {
max-height: 240px;
}
.menu-btn:checked ~ .menu .nav-icon {
background: transparent;
}
.menu-btn:checked ~ .menu-icon .nav-icon:before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-btn:checked ~ .menu-icon .nav-icon:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-btn:checked ~ .menu-icon .nav-icon:not(.steps) .navicon:before {
top: 0;
}
.menu-btn:checked ~ .menu-icon .nav-icon:not(.steps) .navicon:after {
top: 0;
}
.menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.menu-icon:hover {
cursor: pointer;
}
.menu-icon .nav-icon {
background-color: #000000;
display: block;
height: 2px;
width: 18px;
position: relative;
-webkit-transition: background .2s ease-out;
transition: background .2s ease-out;
}
.menu-icon .nav-icon:before {
background-color: #000000;
content: '';
display: block;
height: 100%;
width: 100%;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
position: absolute;
top: 5px;
}
.menu-icon .nav-icon:after {
background-color: #000000;
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 5px;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
top: -5px;
}
section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-sizing: content-box;
box-sizing: content-box;
top: 44px;
height: 279px;
-ms-flex-line-pack: center;
align-content: center;
width: 320px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
z-index: 2;
}
section article p {
width: 288px;
height: 66px;
position: absolute;
left: 16px;
top: 173px;
font-family: 'IBMPlexMono',monospace;
font-size: 14px;
color: #060A24;
letter-spacing: 0;
line-height: 22px;
}
section .hello {
width: 85px;
height: 73px;
position: absolute;
top: 73px;
left: 16px;
font-family: 'IBMPlexSans',sans-serif;
font-size: 36px;
color: #060A24;
letter-spacing: 0;
line-height: 42px;
}
}````
<header>
<img class="logo" src="logo.svg">
<input class="menu-btn" type="checkbox" id="menu-btn">
<label class="menu-icon" for="menu-btn"><span class="nav-icon">
</span> </label>
<ul class="menu">
<li>
<a href="episodios.html" >EPISODIOS</a>
</li>
<li>
<a href="nosotros.html">NOSOTROS</a>
</li>
<li>
<a href="entrevistas.html" >ENTREVISTAS</a>
</li>
<li>
<a href="topicos.html" >TOPICOS</a>
</li>
</ul>
</header>
<section >
<h1 ><div class="hello">Hello</div> <div class="world">world</div> <div
class="pale">pale blue dot</div><div class="dot">.</div></h1>
<article>
<p> El portal de postcast que explora el mundo de la programacion y la
tecnologia. Nuevas episodios,todos los jueves cada 15 días.</p>
</article>