Как мне сделать так, чтобы меню гамбургера оставалось за наложением и заголовком? ⇐ Html

[Anonymous]

Я уже несколько дней ломаю голову над этой проблемой. Я не могу понять, почему этот макет не работает с правильными значениями z-index.
С CSS происходит странное взаимодействие.




Темное наложение закрывает все, кроме изображения логотипа. Меню располагается над заголовком, и я хочу, чтобы оба они располагались под заголовком.
Я попытался разместить меню и наложение под заголовком. Они этого не сделают и останутся на вершине.

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

// Get the elements
const hamburgerButton = document.querySelector(".ham_menu"); // The hamburger button
const menu = document.querySelector(".off_screen_menu"); // The hamburger menu
const overlay = document.querySelector(".overlay"); // The overlay

// Toggle the hamburger menu
hamburgerButton.addEventListener("click", (event) => {
event.stopPropagation(); // Prevent the click from bubbling up
menu.classList.toggle("active"); // Toggle the menu open/close class
overlay.classList.toggle("active"); // Show/hide the overlay
hamburgerButton.classList.toggle("active"); // Toggle hamburger button animation
});

// Close the hamburger menu if clicked on the overlay
overlay.addEventListener("click", () => {
menu.classList.remove("active");
overlay.classList.remove("active");
hamburgerButton.classList.remove("active");  // Reset the hamburger animation
});< /code>
#header_box {
display: flex;
width: 100%;
justify-content: space-around;
position: relative;
top: 0;
z-index: 5000;
border-bottom: 2px solid black;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/* Subtle shadow for better visibility */
}

.off_screen_menu {
background-color: white;
height: 100vh;
width: 100%;
max-width: 200px;
position: fixed;
top: 0;
right: -450px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 3rem;
transition: right 0.4s ease;
justify-content: flex-start;
padding-top: 1.5em;
z-index: 1;
}

.off_screen_menu.active {
right: 0;
z-index: 1000;
}

.overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
/* Semi-transparent black */
z-index: 999;
/* Ensure it sits above other content */
display: none;
pointer-events: auto;
/* Allows clicks through */
}

.overlay.active {
display: block;
/* Show overlay when menu is active */
pointer-events: auto;
/* Allows interaction with menu */
}

.ham_menu {
height: 50px;
width: 40px;
margin-left: auto;
position: relative;
z-index: 10000;
cursor: pointer;
left: 0;
}

.ham_menu span {
height: 5px;
width: 100%;
background-color: black;
border-radius: 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.4s ease, opacity 0.4s ease;
}

.ham_menu span:nth-child(1) {
top: 25%;
}

.ham_menu span:nth-child(3) {
top: 75%;
}

.ham_menu.active span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}

.ham_menu.active span:nth-child(2) {
opacity: 0;
}

.ham_menu.active span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}< /code>



[url=index.html]
[img]assets/img/nh_logo.png[/img]
            alt="Fancy logo">[/url]
Noah's Portfolio





[*][url=index.html]Home[/url]
[*][url=assets/pages/about.html]About Me[/url]
[*][url=assets/pages/resume.html]Resume[/url]
[*][url=assets/pages/contact.html]Contact[/url]

Подробнее здесь: https://stackoverflow.com/questions/793 ... and-header