Change color of hamburger menu on click-CodePudding

I want to change the color of the hamburger menu when the menu is opened. When the user clicks on the hamburger menu, the color should change from black to white and and vice versa. I´m not using a button for the menu but three spans. I haven't tried anything yet, because I´m pretty new and espacially js is still very difficult for me. Thanks for helping me!

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
});

document.querySelector(".nav.link").forEach((n) =>
  n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
  })
);

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: black;
}

@media (max-width: 1000px) {
  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 0px;
    gap: 0;
    flex-direction: column;
    background-color: black;
    width: 100%;
    text-align: center;
  }

  .nav-item {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
  }

  .nav-menu.active {
    left: 0;
  }

  .menu a {
    color: white;
  }
}

<nav id="nav" >
          <ul >
            <li id="current" >
              <a
                href="file:///C:/Users/.../index.html"
                
                >Home</a
              >
            </li>
            <li>
              <a
                href="file:///C:/Users/.../about.html"
                
                >About</a
              >
            </li>
          </ul>
          <div >
            <span ></span>
            <span ></span>
            <span ></span>
          </div>
        </nav>

CodePudding user response：

To change the color of the bars, you just need to add this to your css:

.hamburger.active .bar {
    background-color: gray;
}

You wrote that you want the color to change from white to black and vice versa, but i would recommend you that, because you cant see the white bars on a white background. This is why i set the color to gray in this example.

Also, you made a mistake with the layering. You can see the hamburger infront of the menu when its open. To fix this, just set z-index to 2:

.nav-menu {
    z-index: 2;
}

Here's a full example:

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
});

document.querySelector(".nav.link").forEach((n) =>
  n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
  })
);

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: black;
}

@media (max-width: 1000px) {
  .hamburger {
    display: block;
  }

  .hamburger.active .bar {
    background-color: gray;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 0px;
    gap: 0;
    flex-direction: column;
    background-color: black;
    width: 100%;
    text-align: center;
    z-index: 2;
  }

  .nav-item {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
  }

  .nav-menu.active {
    left: 0;
  }

  .menu a {
    color: white;
  }
}

<nav id="nav" >
          <ul >
            <li id="current" >
              <a
                href="file:///C:/Users/.../index.html"
                
                >Home</a
              >
            </li>
            <li>
              <a
                href="file:///C:/Users/.../about.html"
                
                >About</a
              >
            </li>
          </ul>
          <div >
            <span ></span>
            <span ></span>
            <span ></span>
          </div>
        </nav>