Pure CSS Hamburger menu shows up when resizing viewport before disappearing

Show Details

Solution 1: [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>


Credits

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Credit
Solution 1 Nezuko