How can I keep my hamburger menu and overlay behind the header?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I've been struggling for days to get my layout right: the dark overlay covers everything except the logo, and the menu appears above the header even though I want both to be underneath it. I'm suspecting that stacking context and z-index rules might be interacting oddly. I've tried adjusting z-index values in my CSS, yet the overlay and menu remain on top.

Here are the relevant code snippets:

JAVASCRIPT
// 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
});

CSS
#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);
}

HTML
<header>
  <div id="header_box">
    <div id="header_1">
      <a href="index.html"><img id="nh_logo" src="assets/img/nh_logo.png"
            alt="Fancy logo"></a>
      <h1>Noah's Portfolio</h1>
    </div>

    <!-- Links to the different pages at the top -->
    <div id="header_2">
      <div class="off_screen_menu">
        <nav>
          <li><a href="index.html">Home</a></li>
          <li><a href="assets/pages/about.html">About Me</a></li>
          <li><a href="assets/pages/resume.html">Resume</a></li>
          <li><a href="assets/pages/contact.html">Contact</a></li>
          </ul>
        </nav>
      </div>

      <nav>
        <div class="ham_menu">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </nav>
    </div>
  </div>
</header>


<body>
  <!-- Main content of the page -->
  <main>
    <!-- Dark overlay when hamburger menu is active -->
    <div class="overlay"></div>
  </main>
</body>

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

The issue is that the header and the fixed-position overlay/menu aren’t in the same stacking context. Even though your #header_box has a high z-index, it only controls stacking within its own context. Fixed elements (and their assigned z-index values) live in the root stacking context unless their parent creates a new stacking context.

What’s Happening

The header is positioned relative and gets its own stacking context with z-index: 5000.
The overlay and menu are fixed and are placed in the root stacking context. Their z-index values (999, 1000, etc.) are only compared against other elements in that same context.
Even though numerically 5000 is greater than 1000, those z-index rules don’t “cross” stacking context boundaries. So your fixed elements are still drawn above elements that aren’t in the same root stacking context, depending on their creation order and context.

How to Fix It

You have a few options:

Move the Overlay/Menu into the Header’s Markup
By placing the overlay (and/or menu) inside the header element (or inside a container that is a child of the header) you force them into the same stacking context. For example:

HTML
<header>
  <div id="header_box">
    <!-- header content -->
    <img id="nh_logo" src="assets/img/nh_logo.png" alt="Fancy logo">
    <!-- other header elements -->
  </div>
  <!-- Move the overlay into header -->
  <div class="overlay"></div>
</header>
<body>
  <main>
    <!-- page content -->
  </main>
</body>

Create a Common Stacking Context
Wrap both the header and the overlay/menu in a common parent that has a positioning plus z-index to form a unified stacking context. For example:

HTML
<div class="site-container">
  <header>
    <div id="header_box">
      <!-- header content -->
    </div>
  </header>
  <main>
    <!-- Main content here -->
  </main>
  <div class="overlay"></div>
  <div class="off_screen_menu">
    <!-- off screen menu content -->
  </div>
</div>

And then in your CSS, give .site-container a position (relative or fixed) and no z-index conflict:

CSS
.site-container {
  position: relative; /* creates new stacking context */
  z-index: 0;
}

/* Adjust z-index values so header is above overlay */
#header_box {
  z-index: 5000;
}
.overlay {
  z-index: 1000; /* now below header_box */
}
.off_screen_menu {
  z-index: 1500; /* adjust as needed; below header if necessary */
}

Change the Position of the Header
If it works with your layout, one can make the header fixed so it naturally appears on top:
```
CSS
#header_box {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5000;
}
```
This way, both header and fixed overlay share the same root stacking context, and the header will appear on top, provided its z-index is higher.

Summary

The core problem is that fixed elements are taken out of the document flow and placed into the root stacking context. Their z-index isn’t compared with the z-index of elements in other stacking contexts (like your header’s) unless they share the same parent. To resolve the issue, either move the overlay/menu into the header’s DOM, create a common stacking context, or change the header’s position so that its stacking context matches that of the overlay/menu.

Choose the option that works best with your overall layout.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by LunarSentinel908 • 1 month ago

I think your best solution is to move your overlay into the header block, and giving it some z-index value, like so:

JAVASCRIPT
// 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
});

CSS
#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;
  z-index: 100;  /* <--- ADDED Z-INDEX HERE */
  /* 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);
}

HTML
<body>
  <header>
    <div id="header_box">
      <div id="header_1">
        <a href="index.html"><img id="nh_logo" src="assets/img/nh_logo.png"
            alt="Fancy logo"></a>
        <h1>Noah's Portfolio</h1>
      </div>

      <!-- Links to the different pages at the top -->
      <div id="header_2">
        <div class="off_screen_menu">
          <nav>
            <li><a href="index.html">Home</a></li>
            <li><a href="assets/pages/about.html">About Me</a></li>
            <li><a href="assets/pages/resume.html">Resume</a></li>
            <li><a href="assets/pages/contact.html">Contact</a></li>
            </ul>
          </nav>
        </div>

        <nav>
          <div class="ham_menu">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </nav>
      </div>
      <!-- MOVED OVERLAY HERE -->
      <div class="overlay"></div>
    </div>

  </header>


  <!-- Main content of the page -->
  <main>
    <!-- Dark overlay when hamburger menu is active -->
    <p>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non nisi at neque pulvinar rutrum non et lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida lorem ut mi volutpat pharetra. Sed placerat pellentesque velit, ac auctor dui sodales in. Pellentesque non lacinia ante. Nam tempor arcu leo. Fusce purus risus, pellentesque non felis eu, porttitor sagittis diam. Nunc molestie purus velit, efficitur interdum nulla porta et. Curabitur nec ligula quis sem tempor venenatis. Etiam feugiat nunc non sodales varius. Integer non ligula ipsum. Cras diam metus, tempor in rutrum quis, fringilla sed diam.

      Donec pulvinar ligula eu tincidunt dignissim. Praesent at sapien ut sapien eleifend ullamcorper. Nam consequat commodo ante at placerat. Integer id metus mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor pulvinar mauris, et vehicula dui faucibus a. Nullam imperdiet volutpat arcu, vulputate placerat mi venenatis a. Vivamus at cursus lectus. Maecenas imperdiet nisi mi. Sed sagittis nibh id neque sagittis mattis. In sodales ullamcorper mi nec cursus. Phasellus sed ligula ac metus venenatis semper at sit amet tellus. Morbi congue ante id arcu molestie convallis. Suspendisse sagittis sem ut orci congue vestibulum. Integer interdum nunc sed congue vestibulum.

      Duis maximus dolor diam, vitae imperdiet mi ornare et. In elementum nec turpis at malesuada. Morbi id enim tortor. Aenean sollicitudin arcu quis orci ultrices dictum. Curabitur cursus leo ac odio iaculis, ac varius enim congue. Sed ultrices dictum dui, et consectetur leo consectetur vitae. Nunc a vestibulum quam.

      Morbi rutrum quam nisi, ut malesuada metus ullamcorper nec. Nullam vel venenatis purus, id tristique felis. Morbi et tortor metus. Maecenas ultrices sapien vel sem lobortis, in ornare odio interdum. Duis pellentesque, purus a consequat efficitur, orci odio scelerisque turpis, malesuada bibendum nibh ante quis nisl. Phasellus convallis scelerisque tortor, vitae bibendum orci sodales eu. Nulla semper fringilla molestie.

      Curabitur accumsan diam quis ligula eleifend dictum sit amet nec ipsum. Curabitur auctor neque sed tempor commodo. Nam hendrerit, sapien suscipit condimentum condimentum, metus augue mollis nisi, vitae tristique libero magna at nulla. Maecenas volutpat imperdiet pulvinar. Vestibulum tristique ultrices tellus. Aenean leo lectus, sodales sit amet erat eu, imperdiet consectetur mi. Curabitur id augue mattis, fermentum metus at, auctor mi. Integer ex sem, fermentum et neque in, faucibus blandit nibh. Ut viverra gravida velit, vitae consequat magna cursus at. </p>
  </main>
</body>

Run code snippetHide resultsExpand snippet

I also moved your header into body, as @Darkbee said, it's not related to the issue, but better html

No comments yet.

Discussion

No comments yet.

How can I keep my hamburger menu and overlay behind the header?

2 Answers

What’s Happening

How to Fix It

Summary

Discussion

Similar Posts

How can I test a button's Spotify auth redirection with Cypress without using window.location.href?

How can I count characters within square bracket groups, including empty ones, in JavaScript?

How can I fix the 'Cannot read properties of undefined' error when mapping over API data in React?