Pure CSS Hamburger Menu Shows Up When Resizing Viewport Before Disappearing

I have a pure css hamburger menu based on this codepen and I made my hamburger menu only show up on devices with 768px width and below, the hamburger menu also has some transitions

Solution 1:

Using javascript we can add the stop-transition class to the body for some few milliseconds. Then in the css we can add the rule to stop play any transition momentarily. After that, when the resize is done, we can remove the stop-transition class from the body to make sure that everything acts accordingly.

Here's the fiddle.

(function () {
  const classes = document.body.classList;
  let timer = null;
  window.addEventListener('resize', function () {
    if (timer){
      clearTimeout(timer);
      timer = null;
    } else {
      classes.add('stop-transition');
    }
    timer = setTimeout(() => {
      classes.remove('stop-transition');
      timer = null;
    }, 100);
  });
})();

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-width: fit-content;
}

body {
  font-family: "Montserrat", sans-serif;
  background-color: #eeeeee;
}

/* Stop playing transition momentarily on viewport resize. */
body.stop-transition .menu {
  transition: none;
}

header {
  width: 100%;
  background-color: #eeeeee;
  padding: 0 20px;
  height: 65px;
  position: fixed;
  top: 0;
}

.logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

#header-img {
  width: 100%;
  height: 100%;
  max-width: 300px;
}

/* Navigation */

nav {
  width: 100%;
  text-align: center;
}

/* Hamburger menu button */

.menu-btn {
  display: none;
}

.menu-icon {
  display: inline-block;
  position: relative;
  top: -42px;
  left: -25px;
  cursor: pointer;
  padding: 24px 14px;
  z-index: 1;
}

.navicon {
  background-color: #222222;
  display: block;
  height: 3px;
  width: 26px;
  position: relative;
  transition: 0.3192s ease-in-out;
}

.navicon:before,
.navicon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #222222;
  transition: 0.3192s ease-in-out;
}

.navicon:before {
  top: 9px;
}

.navicon:after {
  bottom: 9px;
}

/* Hamburger Menu Animation Start */

.menu-btn:checked~.menu-icon .navicon:before {
  transform: rotate(-45deg);
  top: 0;
}

.menu-btn:checked~.menu-icon .navicon:after {
  transform: rotate(45deg);
  bottom: 0;
}

.menu-btn:checked~.menu-icon .navicon {
  background: transparent;
  transition: 0.3192s ease-in-out;
}

/* Hide blue background on hamburger menu tap on some mobile devices */

.menu-icon,
.menu-btn,
.navicon {
  -webkit-tap-highlight-color: transparent;
}

/* Nav items */

.menu {
  background-color: #eeeeee;
  width: 100%;
  height: auto;
  list-style-type: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 65px;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}


.menu-btn:checked~nav .menu {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}

.menu li {
  border-top: 1px solid #c7c7c7;
  padding: 10px 0;
  opacity: 0;
  transition: 0.5s;
}

.menu a {
  color: #222222;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0;
  transition: 0.5s;
}

.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
  opacity: 1;
  transition: 0.3192s ease-in-out;
}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  header {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .logo {
    width: 60vw;
    margin-top: 0;
    justify-content: flex-start;
  }

  .menu-icon {
    display: none;
  }

  nav {
    width: 40vw;
    margin-top: 0;
  }

  .menu {
    width: 100%;
    transform: none;
    transition: none;
    position: static;
    margin: 0;
    visibility: visible;
    opacity: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .menu li {
    border: none;
    padding: 0;
    opacity: 1;
    transition: none;
  }

  .menu a {
    opacity: 1;
    transition: none;
  }
}

<main id="main">
   <header id="header">

     <div class="logo">
       <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
     </div>

     <input type="checkbox" class="menu-btn" id="menu-btn">
     <label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>

     <nav id="nav-bar">
       <ul class="menu">
         <li><a href="#features" class="nav-link">Feautures</a></li>
         <li><a href="#how-it-works" class="nav-link">How it Works</a></li>
         <li><a href="#pricing" class="nav-link">Pricing</a></li>
       </ul>
     </nav>

   </header>
 </main>