0

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> 

1
  • Hola @Rocio bienvenida a la comunidad, te recomiendo que leas como preguntar y te aconsejo que cada vez que subas html con codigo css uses el editor de stack para poder visualizar tu contenido de forma grafica
    – Enzo
    Commented el 21 abr. 2020 a las 14:44

1 respuesta 1

0

estuve probando tu menú y lo que modifiqué fue tu clase CSS llamada .menu:

.menu {
    width: 300px;
    height: 800px;
    max-height: 0;
    position: relative;
    z-index: 4;
    clear: both;
    -webkit-transition: max-height .2s ease-out;
    transition: max-height .2s ease-out;
}

Le apliqué position: relative; z-index: 4; lo puse en posición relativa y z-index 4 para que estuviera superpuesto sobre los otros elementos, ya que vi que tienes otros elementos con z-index.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.