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>