Hamburger Menu issue - nav menu not disappearing

Question

I am having an issue getting my hamburger menu to remain and nav menu to disappear. Is anyone able to help?

nav {
  grid-area: nav;
  align-items: center;
  background-color: rgb(0, 0, 0);
  padding: 10px;
  border: 3px solid rgb(0, 0, 0);
  display: inline-block;
  background-size: 100% auto;
  background-repeat: no-repeat;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
}

nav a {
  display: inline-block;
  background-color: rgb(252, 252, 252);
  color: rgb(0);
  padding: 10px 15px;
  border: 2px solid black;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.3s;
  /* Smooth transition for hover effects */
  text-decoration: none;
  margin: 0 10px;
}

nav a:hover {
  background-color: rgb(140, 71, 147);
  /* Change background on hover */
  color: rgb(255, 255, 255);
  /* Change text color on hover */
  transform: scale(1.05);
  /* Slightly increase size on hover */
}


/*MOBILE*/

.toggle-button {
  position: absolute;
  top: 18.2rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: purple;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .toggle-button {
    display: flex;
  }
  .nav {
    display: none;
  }
  .nav a {
    display: none;
  }
}

<nav>
  <a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
  <!-- Navigation Links -->
  <a href="index.html">Home</a>
  <a href="whatson.html">Whats on</a>
  <a href="businesses.html">Businesses</a>
  <a href="gallery.html">Gallery</a>
  <a href="contactus.html">Contact us</a>
</nav>

I have been trying for hours and cannot understand what's happening. Thanks in advance

I've tried everything I can think of! Any help will be greatly appreciated.

Image of what is happening

Answer 1

Try something like this:
Take out the toggle-button from the nav so it is not made invisible when you toggle it to be hidden.
Give the nav an id: nav and class: hide which means that the nav will not show on smaller devices like mobiles due to your media query.
Then use JS to toggle the hide class on and off when the user clicks the button.

document.querySelector(".toggle-button").addEventListener("click", () => {
  document.querySelector("#nav").classList.toggle("hide")
})

nav {
  grid-area: nav;
  align-items: center;
  background-color: rgb(0, 0, 0);
  padding: 10px;
  border: 3px solid rgb(0, 0, 0);
  display: inline-block;
  background-size: 100% auto;
  background-repeat: no-repeat;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
}

nav a {
  display: inline-block;
  background-color: rgb(252, 252, 252);
  color: rgb(0);
  padding: 10px 15px;
  border: 2px solid black;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.3s;
  /* Smooth transition for hover effects */
  text-decoration: none;
  margin: 0 10px;
}

nav a:hover {
  background-color: rgb(140, 71, 147);
  /* Change background on hover */
  color: rgb(255, 255, 255);
  /* Change text color on hover */
  transform: scale(1.05);
  /* Slightly increase size on hover */
}


/*MOBILE*/

.toggle-button {
  position: absolute;
  top: 18.2rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: purple;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .toggle-button {
    display: flex;
  }
  .hide {
    display: none
  }
}

<a href="#" class="toggle-button">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</a>
<nav id="nav" class="hide">
  <!-- Navigation Links -->
  <a href="index.html">Home</a>
  <a href="whatson.html">Whats on</a>
  <a href="businesses.html">Businesses</a>
  <a href="gallery.html">Gallery</a>
  <a href="contactus.html">Contact us</a>
</nav>