0

Tengo un problema con el botón hamburguesa. Cuando sobrepongo el puntero del mouse no se aplica el estilo CSS, y por lo tanto tampoco funciona el jQuery para abrirlo.

¿Cómo puedo hacer funcionar el botón hamburguesa?

$(document).ready(function() {
  $(".c-hamburger").click(function() {
    $("#hamb-nav").toggle(100);
  });
});

$(".c-hamburger").click(function() {
  $(this).toggleClass("c-hamburger--htx");
});
body {
  margin: 0px;
  padding: 0px;
  font-family: 'EB Garamond', serif;
}

#top-bar {
  margin: 0px;
  padding: 0px;
}

#hamb-icon {
  position: fixed;
  margin: 15px;
  right: 0;
  top: 0;
}

#hamb-icon:hover {
  cursor: pointer;
}

#hamb-nav {
  display: none;
  float: right;
  margin-top: 40px;
}

#hamb-nav ul {
  list-style-type: none;
  text-align: right;
  padding: 15px 30px 0px 0px;
  margin: 0px;
}

#hamb-nav ul li {
  padding: 10px 0px 10px 0px;
  font-family: 'EB Garamond', serif;
  font-size: 20pt;
}

#mid-bar {
  clear: both;
  position: absolute;
  text-align: center;
  padding: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

#mid-bar h1 {
  font-family: 'EB Garamond', serif;
  font-size: 30pt;
  font-style: italic;
  font-weight: normal;
}


/*hamburger menu icon*/

.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  background-color: #fff;
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 15px;
  left: 4px;
  right: 4px;
  height: 3px;
  background: #A4A4A4;
  border-radius: 5px;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #A4A4A4;
  content: "";
  border-radius: 5px;
}

.c-hamburger span::before {
  top: -8px;
}

.c-hamburger span::after {
  bottom: -8px;
}


/*hamburger menu icon when open*/

.c-hamburger--htx {
  background-color: #fff;
}

.c-hamburger--htx span {
  background: none;
}

.c-hamburger--htx span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-delay: 0s, 0.3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>dive</title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div id="top-bar">
    <div id="hamb-icon">
      <button class="c-hamburger">
  				<span></span>
			</button>
    </div>
  </div>
  <nav id="hamb-nav">
    <ul>
      <li>Nav</li>
      <li>Nav</li>
      <li>Nav</li>
    </ul>
  </nav>
  <div id="mid-bar">
    <h1>DIVE</h1>
  </div>
</body>
</html>

3
  • por favor cambia tu pregunta en español Commented el 16 may. 2017 a las 17:55
  • Formula bien tu pregunta, que es lo que falla? que pretendes con este codigo? estructuralo. Commented el 16 may. 2017 a las 17:56
  • 1
    no esta funcionando jquery, no puedo encontrar dónde esta el error. necesito hacer un toggle entre clases para que el icono de menu muestre el menú y a su vez cambie de tres rayas a una equis. Commented el 16 may. 2017 a las 17:59

1 respuesta 1

1

Modifica los z-index de #mid-bar y #ham-icon, con eso debería funcionar

Esto es un problema cuando usas position en algún elemento y esto tiende a sobreponer el elemento sobre otro elemento, entonces estas dos reglas deberian quedarte algo así.

#mid-bar {
  clear: both;
  position: absolute;

  text-align: center;
  padding: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 1;
}

#hamb-icon {
  position: fixed;
  margin: 15px;
  right: 0;
  top: 0;
  z-index: 2;
}

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.