Here is a video of the issue. And not sure why this problem is occurring when I decrease the height in responsive design mode. Beginner web developer, any help appreciated.

.main-navigation {
  position: absolute;
  height: 100%;
  top: -100%;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fffefc;
  transform: translateY(0);
  transition: all 500ms;
}

/* modifier class*/
.navigation-open {
  transform: translateY(100%);
}

const closeButton = document.querySelector(".close-nav-btn");
const openButton = document.querySelector(".open-nav-btn");
const nav = document.querySelector(".main-navigation");

closeButton.addEventListener("click", () => {
  nav.classList.remove("navigation-open");
});

openButton.addEventListener("click", () => {
  nav.classList.add("navigation-open");
});

Let me know if further info is required to help out. (:

CodePudding user response：

This top: -100% you have means "move the navigation to the top of the containing block's height". When you resize, the containing block's height is becoming smaller than your navigation's height, which is causing this overflow you see. A solution could be doing as below.

Notice I'm animating the height of the navigation, instead its top property.

.main-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height:0;
  overflow:hidden;
  background-color: #fffefc;
  transition: all 500ms;
}

.navigation-open {
   overflow:auto;
   height: 100vh;
}