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?

Thank you for your help!

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>

2

There were a few issues here. Take a look at the CSS in my answer, I scoped a lot of the styling to the media query so that it didn’t affect your navigation when on bigger screens. You were also using position: fixed for .nav-menubetter would be to use position: absolute and add position: relative to the .navbar

The .nav-menu is set to be off the screen using transform: translateX(-100vw) because transforms are much more predicable to use because top/right/bottom/left positioning can sometimes resize elements depending on how they’re laid out. Transforms are also much easier for browsers to calculate

I also setup a very basic bit of JavaScript to toggle the active class, this add the class to .navbar instead of to .hamburger and .nav-menu and the CSS was the updated to account for this

Any questions let me know, happy to explain further

const navbar = document.querySelector('.navbar');
const hamburger = document.querySelector('.hamburger');

hamburger.addEventListener('click', function (e) { navbar.classList.toggle('active') });
* { box-sizing: border-box } body { font: 16px sans-serif; margin: 0 }
a { color: white; text-decoration: none }
header { background-color: black }


:root {
  --transitionDelay: 0ms;
  --transitionSpeed: 500ms;
  --transitionFunction: cubic-bezier(0.860, 0.000, 0.070, 1.000);
  --transitionFunctionBar: cubic-bezier(0.680, -0.550, 0.265, 1.550);


  --transition: var(--transitionSpeed) var(--transitionDelay) var(--transitionFunction);
  --transitionBar: var(--transitionSpeed) var(--transitionDelay) var(--transitionFunctionBar);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  gap: 60px;
}
.nav-branding { font-size: 2rem }
.nav-link { transition: color var(--transition) }
.nav-link:hover{ color: dodgerblue }
.hamburger { display: none }

.nav-menu{
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

@media(max-width:768px) {
  .navbar { position: relative }

  .hamburger{ cursor: pointer; display: block }
  
  .bar {
    background-color: white;
    display: block;
    height: 3px; width: 25px;
    margin: 5px auto;
    transition: opacity var(--transitionBar), transform var(--transitionBar);
  }
  
  .nav-menu {
    background-image: linear-gradient(45deg, #222, #666, #222);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 200%;

    flex-direction: column;
    gap: 0;
    justify-content: center;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    top: 100%;
    width: 100%;
    transform: scale(0) translate(100vw, -100%);
    transform-origin: calc(100% - 1.5rem) calc(1.5rem * -1.75);
    transition: background-position calc(var(--transitionSpeed) * 2) var(--transitionSpeed) var(--transitionFunction), transform var(--transition);
  }
  
  .nav-item {
    margin: 0;
    text-align: center;
    transform: translateX(100vw);
    transition: transform var(--transitionSpeed) var(--transitionDelay) var(--transitionFunction);
  }
  .nav-item:nth-of-type(1) { --transitionDelay: calc( var(--transitionSpeed) / 2 + ( 1 * 50ms ) ) }
  .nav-item:nth-of-type(2) { --transitionDelay: calc( var(--transitionSpeed) / 2 + ( 2 * 50ms ) ) }
  .nav-item:nth-of-type(3) { --transitionDelay: calc( var(--transitionSpeed) / 2 + ( 3 * 50ms ) ) }
  .nav-item:nth-of-type(4) { --transitionDelay: calc( var(--transitionSpeed) / 2 + ( 4 * 50ms ) ) }
  .nav-item:nth-of-type(5) { --transitionDelay: calc( var(--transitionSpeed) / 2 + ( 5 * 50ms ) ) }
  .nav-item:nth-of-type(6) { --transitionDelay: calc( var(--transitionSpeed) / 2 + ( 6 * 50ms ) ) }
  .nav-item:nth-of-type(7) { --transitionDelay: calc( var(--transitionSpeed) / 2 + ( 7 * 50ms ) ) }
  .nav-item:nth-of-type(8) { --transitionDelay: calc( var(--transitionSpeed) / 2 + ( 8 * 50ms ) ) }
  .nav-item:nth-of-type(9) { --transitionDelay: calc( var(--transitionSpeed) / 2 + ( 9 * 50ms ) ) }
  .nav-link {
    background-color: rgba(0, 0, 0, 0);
    display: block;
    padding: 0.75rem 1rem;
    transition: background-color var(--transition), color var(--transition);
  }
  .nav-link:hover { background-color: rgba(0, 0, 0, 0.3) }
  
  .navbar.active .bar:nth-child(2) { opacity: 0 }
  .navbar.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg) }
  .navbar.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg) }
  .navbar.active .nav-menu { background-position: bottom right; transform: scale(1) translate(0) }
  .navbar.active .nav-item { transform: translateX(0) }
}
<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>
  </nav>
</header>