0

Estoy intentando hacer un menú de hamburguesa utilizando :target pero no se muestra el resultado esperado.

Este es el menú en primera instancia:

introducir la descripción de la imagen aquí

Pero al darle clic en el icono de menú solo logra sobreponer las primeras dos opciones de todo el menú sobre el encabezado anterior.

introducir la descripción de la imagen aquí

Mi código del HTML es el siguiente:

.nav-bar{
  overflow: hidden;
}

.nav-responsive{
  background-color: #FFAB00;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.10980);
}

.mobile-logo{
  height: 75px;
}

.mobile-icon{
  color: #000000;
  font-size: 2.5rem;
  display: block;
  padding: 0px 15px;
}

.mobile-icon:hover{
  color: #ffffff;
  background-color: #019306;
}

#nav:target{
  max-height: 800;
}

.navegation{
  max-height: 0;
}

.navegation a{
  background-color:rgba(255, 171, 0, 0.61);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #000000;
  font-size: 1rem;
  display: block;
  text-align: center;
  padding: 10px 0;  
  border-bottom: 2px dotted rgba(255, 255, 255, 0.35);;
}

.navegation a:last-of-type{
  border-bottom: none;
}

.navegation .logo-center{
  display: none;
} 
<header class="site-header">
  <div class="nav-bar">
    <div class="nav-responsive py-2 px-3 px-md-4">
      <a href="/" class="">
        <img src="img/logo.png" class="mobile-logo" alt="Logotipo de la escuela">
      </a>
      <a href="#nav" class="mobile-icon">
        <i class="fas fa-bars"></i>
      </a>
    </div>

    <div class="nav-container">
      <nav id="nav" class="navegation">
        <a href="#">INICIO</a>
        <a href="#">NOSOTROS</a>
        <a href="#" class="opc">OFERTA EDUCATIVA</a>
        <a href="/" class="py-2 logo-center">
          <img src="img/logo.png" class="logo" alt="Logotipo de la escuela">
        </a>
        <a href="#">INSCRIPCIONES</a>
        <a href="#">INSTALACIONES</a>
        <a href="#">CONTACTO</a>
        
      </nav>
    </div>
  </div>
</header>

No entiendo porque no se muestra tal cual, ya intenté cambiar el id del nav después del header pero en este caso el menú no despliega nada. Espero puedan ayudarme con esto, no encuentro cual es el problema o bien si es más apto utilizar javascript.

De antemano, muchas gracias.

2
  • Intenta usar #nav:target sin el # el 31 dic. 2019 a las 4:59
  • Me parece que tienes que añadirle overflow:visible el 31 dic. 2019 a las 22:32

1 respuesta 1

0

Con el código que pones no tengo un ejemplo mínimo verificable y viable para probar una solución:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">
        .mobile-icon{
          color: #000000;
          font-size: 2.5rem;
          display: block;
          padding: 0px 15px;
        }

        .mobile-icon:hover{
          color: #ffffff;
          background-color: #019306;
        }

        #nav:target{
          max-height: 800;
        }

        .navegation{
          max-height: 0;
        }

        .navegation a{
          background-color:rgba(255, 171, 0, 0.61);
          font-family: 'Roboto', sans-serif;
          font-weight: 700;
          color: #000000;
          font-size: 1rem;
          display: block;
          text-align: center;
          padding: 10px 0;  
          border-bottom: 2px dotted rgba(255, 255, 255, 0.35);;
        }

        .navegation a:last-of-type{
          border-bottom: none;
        }

        .navegation .logo-center{
          display: none;
        } 
    </style>
</head>
<body>
<header class="site-header">
  <div class="nav-bar">
    <div class="nav-responsive py-2 px-3 px-md-4">
      <a href="/" class="">
        <img src="img/logo.png" class="mobile-logo" alt="Logotipo de la escuela">
      </a>
      <a href="#nav" class="mobile-icon">
        <i class="fas fa-bars"></i>
      </a>
    </div>

    <div class="nav-container">
      <nav id="nav" class="navegation">
        <a href="#">INICIO</a>
        <a href="#">NOSOTROS</a>
        <a href="#" class="opc">OFERTA EDUCATIVA</a>
        <a href="/" class="py-2 logo-center">
          <img src="img/logo.png" class="logo" alt="Logotipo de la escuela">
        </a>
        <a href="#">INSCRIPCIONES</a>
        <a href="#">INSTALACIONES</a>
        <a href="#">CONTACTO</a>
        
      </nav>
    </div>
  </div>
</header>
</body>
</html>

Viendo las capturas que has puesto

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

y el CSS, creo que el problema esta aquí:

#nav:target{
    max-height: 800;
}

Primero no estas indicando unidades para la altura. Deben ser pixeles, em, etc. Sólo puedes obviarlas cuando indicas 0.

Segundo es una altura máxima, no fuerza al menú a tener cierta altura (o una altura mínima). El problema parece ser que solo se muestran las opciones que "caben" en la altura ocupada por la imagen que usas de logo, que es la que toma el menú, como altura total, aunque esta se oculte.

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.