Why is the closing X not displayed if the navbar is opened?

Issue

I've tried now quite a time to figure out, why the closing symbol (X) is not displayed if I open my navbar.

If it is closed, everything seems fine.

In the Google Chrome dev tools the icon is still on the page, but in front-end it is not visible.

My environment:

• macOS Monterey
• VS Code with Live Preview extension
• Google Chrome

Is there something I don't see?

Here is my index.html file (I know, the JavaScript should be in an own file ;-P):

section {
  background-color: blue;
  padding: 20px;
  /* height: 40px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

img {
  height: 30px;
  width: auto;
}

.toggle-box a img {
  filter: invert(1);
}

.img.menu.hide {
  display: none;
}

img.close {
  display: none;
}

img.close.show {
  display: flex;
  /* z-index: 9999; */
}

nav.navigation {
  display: none;
}

nav.navigation.active {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  /* z-index: 1111; */
}

nav.navigation.active a {
  padding: 20px;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

.phone-logo a img {
  filter: invert(1);
}

<section>
  <div class="toggle-box">
    <a onclick="showMenu()" href="#">
      <img class="menu" src="menu-outline.svg" />
      <img class="close" src="close-outline.svg" />
    </a>
  </div>
  <nav class="navigation">
    <a href="#">Sec 1</a>
    <a href="#">Sec 2</a>
    <a href="#">Sec 3</a>
    <a href="#">Sec 4</a>
  </nav>
  <div class="phone-logo">
    <a href="#">
      <img src="call-outline.svg" />
    </a>
  </div>
</section>
<script>
  function showMenu() {
    document.querySelector(".menu").classList.toggle("hide");
    document.querySelector(".close").classList.toggle("show");
    document.querySelector(".navigation").classList.toggle("active");
  }
</script>
</body>

Solution

Elements which fall later in the document have a higher stacking order, meaning that they're layered over earlier elements. You can rearrange your markup to resolve that.

section {
  background-color: blue;
  padding: 20px;
  /* height: 40px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

img {
  height: 30px;
  width: auto;
}

.toggle-box a img {
  filter: invert(1);
}

.img.menu.hide {
  display: none;
}

img.close {
  display: none;
}

img.close.show {
  display: flex;
  /* z-index: 9999; */
}

nav.navigation {
  display: none;
}

nav.navigation.active {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  /* z-index: 1111; */
}

nav.navigation.active a {
  padding: 20px;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

.phone-logo a img {
  filter: invert(1);
}

<section>
  <nav class="navigation">
    <a href="#">Sec 1</a>
    <a href="#">Sec 2</a>
    <a href="#">Sec 3</a>
    <a href="#">Sec 4</a>
  </nav>

  <div class="toggle-box">
    <a onclick="showMenu()" href="#">
      <img class="menu" src="menu-outline.svg" />
      <img class="close" src="close-outline.svg" />
    </a>
  </div>

  <div class="phone-logo">
    <a href="#">
      <img src="call-outline.svg" />
    </a>
  </div>
</section>

<script>
  function showMenu() {
    document.querySelector(".menu").classList.toggle("hide");
    document.querySelector(".close").classList.toggle("show");
    document.querySelector(".navigation").classList.toggle("active");
  }
</script>
</body>

Answered By - isherwood