Полноэкранное меню отключает кнопку перезагрузки браузера ⇐ CSS

[Anonymous]

Я пытаюсь создать полноэкранное бургер-меню. Все работает, только не понимаю, почему если попытаться перезагрузить страницу с помощью кнопки браузера, то не получается (страница не перезагружается), а если сделать это из адресной строки, то работает.
Кто мне поможет понять, где я не прав? Заранее большое спасибо.

Код: Выделить всё

Menu Hamburger Creativo



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

body {
margin: 0;
padding: 0;
overflow-x: hidden;
box-sizing: border-box;
}

.hidden {
opacity: 0;
visibility: hidden;
}

.menuMainButton {
position: fixed;
top: 30px;
right: 30px;
background: none;
border: none;
font-size: 2em;
color: #2c3e50;
cursor: pointer;
z-index: 9998;
transition: transform 0.3s ease;
}

.menuMainButton:hover {
transform: scale(1.3);
}

.menu-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
background-color: #ede6de;
color: #282828;
transition: transform 0.3s ease;
transform: translateX(-100%);
overflow-y: auto;
z-index: 9997;
font-family: "Poppins", sans-serif;
font-style: normal;
}

.menu-content.show {
transform: translateX(0);
}

.sinistra {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
height: 100vh;
}

.centro {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
height: 100vh;
}

.destra {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
height: 100vh;
}





[i][/i]




Sinistra

Centro

Destra





Uno
Due



document.addEventListener("DOMContentLoaded", () =>  {
const menuButton = document.querySelector('.menuMainButton');
const menuContent = document.getElementById('menu-content');
const menuIcon = document.getElementById('menuMainIcon');

menuButton.addEventListener('click', () => {
menuContent.classList.toggle('show');
if (menuContent.classList.contains('show')) {
menuIcon.classList.replace('bi-list', 'bi-x');
document.body.style.overflow = 'hidden'; // Disable scrolling when menu is open
} else {
menuIcon.classList.replace('bi-x', 'bi-list');
document.body.style.overflow = 'auto'; // Enable scrolling when menu is closed
}
});
});

Я уже пытался изменить переполнение тела как x, так и x, но не смог решить эту проблему.

Подробнее здесь: https://stackoverflow.com/questions/786 ... oad-button