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: 020px;
  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: 24px14px;
  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;
}

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

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

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

/* Medium devices (landscape tablets, 768px and up) */@mediaonly 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;
  }

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

  .menua {
    opacity: 1;
    transition: none;
  }
}

<mainid="main"><headerid="header"><divclass="logo"><imgid="header-img"src="https://s3.amazonaws.com/freecodecamp/original_trombones.png"alt="original trombones logo"></div><inputtype="checkbox"class="menu-btn"id="menu-btn"><labelfor="menu-btn"class="menu-icon"><spanclass="navicon"></span></label><navid="nav-bar"><ulclass="menu"><li><ahref="#features"class="nav-link">Feautures</a></li><li><ahref="#how-it-works"class="nav-link">How it Works</a></li><li><ahref="#pricing"class="nav-link">Pricing</a></li></ul></nav></header></main>