Sliding sidebar opens underneath content-CodePudding

I'm trying to figure out how to get this sidebar to work, but when I open it via the hamburger menu in a smaller screen, the sidebar opens underneath the content. How can I fix this? I tried following a tutorial to create this sidebar, but apparently I messed something up when I tried adding my own stuff and I'm not sure what to do. I've been playing around with elements in CSS, but it still comes out the same way.

Screenshot of sidebar issue

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Fire Sans", sans-serif;
}

.app {
  display: flex;
  min-height: 100vh;
  background-image: url(../site/images/bg2.jpeg);
}

.sidebar {
  flex: 1 1 0;
  max-width: 300px;
  padding: 2rem 1rem;
  background-color: #053853;
}

.sidebar h3 {
  color: #f6da9b;
  font-size: 0.75 rem;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

.sidebar .menu {
  margin: 0 -1rem;
}

.sidebar .menu .menu-item {
  display: block;
  padding: 1em;
  color: #fff;
  text-decoration: none;
  transition: 0.2 linear;
}

.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
  color: #3bba9c;
  border-right: 5px solid #3bba9c;
}

.content {
  flex: 1 1 0;
  padding: 2rem;
  margin: 4rem;
  width: 60%;
  border: 3px solid #e9d397;
  text-align: center;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.content h1 {
  color: #fff;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.content p {
  color: #fff;
}

.menu-toggle {
  display: none;
  position: fixed;
  top: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 99px;
  background-color: #2e3047;
  cursor: pointer;
}

.hamburger {
  position: relative;
  top: calc(50% - 2px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
}

.hamburger > span,
.hamburger > span::before,
.hamburger > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background-color: #fff;
  transition-duration: 0.25s;
}

.hamburger > span::before {
  content: "";
  top: -8px;
}

.hamburger > span::after {
  content: "";
  top: 8px;
}

.menu-toggle.is-active .hamburger > span {
  transform: rotate(45deg);
}
.menu-toggle.is-active .hamburger > span::before {
  top: 0;
  transform: rotate(0deg);
}
.menu-toggle.is-active .hamburger > span::after {
  top: 0;
  transform: rotate(90deg);
}

@media (max-width: 1024px) {
  .sidebar {
    max-width: 200px;
  }
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .content {
    padding: 2rem;
    margin-top: 8rem;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2 linear;
  }
  .sidebar.is-active {
    left: 0;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Sidebar</title>
  <link rel="stylesheet" href="style3.css" />
</head>

<body>
  <div >

    <div >
      <div >
        <span></span>
      </div>
    </div>

    <aside >
      <h3>Javascript</h3>
      <nav >
        <a href="#" >Home</a>
        <a href="#" >Week 1</a>
        <a href="#" >Week 2</a>
        <a href="#" >Week 3</a>
        <a href="#" >Week 4</a>
        <a href="#" >Week 5</a>
        <a href="#" >Week 6</a>
        <a href="#" >Week 7</a>
        <a href="#" >Week 8</a>
        <a href="#" >Week 9</a>
        <a href="#" >Week 10</a>
      </nav>
    </aside>

    <main >
      <h1>Welcome, Human!</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquid impedit tenetur nam, vitae fugiat doloremque ut incidunt inventore quam qui laboriosam! Esse recusandae a inventore aliquam! Distinctio, expedita hic?</p>
    </main>
  </div>

  <script>
    const menu_toggle = document.querySelector('.menu-toggle');
    const sidebar = document.querySelector('.sidebar');
    menu_toggle.addEventListener('click', () => {
      menu_toggle.classList.toggle('is-active');
      sidebar.classList.toggle('is-active');
    })
  </script>

</body>

</html>

CodePudding user response：

Can you try giving your sidebar a higher z-index than the content?

.sidebar {
   z-index: 2;
}

.content {
   z-index: 1;
}