Navigation menu is showing on top of the website, even though it’s translated it up

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. (: