I'm really scratching my head at this one. I've been following a tutorial on Youtube line for line to make a Hamburger menu to make my site more mobile friendly. I've followed it but when I get to the part when using the .hamburger {display: block;} it doesn't appear. My entire nav-bar vanishes too.
The video does not include a source code, and nobody in the comments seems to have the same issue. I've spent quite a bit of time trying to figure out why it's not showing up. Gone back and edited my code over again, checked for typo's tried online CSS validators... but I've gotten no where. JavaScript will be added later into the code so there are some things that may not work until then, but mine wont even show up at all beforehand. I'm using Codepen for convenience but would that cause issue?
Do you happen to see or know why my hamburger does not display when activated?
a {
color: white;
text-decoration: none;
}
header{
background-color: black;
}
li{
list-style: none;
}
.navbar {
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
gap: 60px;
}
.nav-branding {
font-size: 2rem;
}
.nav-link {
transition: 0.7s ease;
}
.nav-link:hover{
color:dodgerblue;
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: white;
}
@media(max-width:768px) {
.hamburger{
display: block
}
.hamburger.active .bar:nth-child(2){
opacity:0;
}
.hamburger.active .bar:nth-child(1){
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3){
transform: translateY(-8px) rotate(-45deg);
}
}
.nav-menu{
position: fixed;
left: -100%;
top: 70px;
gap: 0;
background-color: gray;
flex-direction: column;
width: 100%;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 16px 0;
}
.nav-menu.active{
left: 0;
}
<body>
<header>
<nav class="navbar">
<a href="#" class="nav-branding">Dev.</a>
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</header>
</body>
left:-100%;
to the.nav-menu
class. Could it be related to that?