'How do you code a hamburger menu to make your navbar appear?

So I am trying to make a responsive nav bar menu by adding a hamburger menu so mobile users could also use my website. I coded the navbar and the hamburger menu. But my problem is that I don't know how to make my navbar appear when you click the hamburger menu icon. Can any of you guys tell me what the code for making my navbar appear onclick. My code is below. Resize your browser to a smaller width to see the hamburger menu if you can't see it. Please ask me questions if you did not understand my question. Again my code is below.

@import url("https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap");

* {
  font-family: "Amatic SC", cursive;
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

nav {
  background: #000;
  height: 80px;
  width: 100%;
}

label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  text-transform: uppercase;
  padding: 1px 13px;
  border-radius: 3px;
}

a.active,
a:hover {
  background-image: linear-gradient(
    109.6deg,
    rgba(61, 245, 167, 1) 11.2%,
    rgba(9, 111, 224, 1) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.5s;
}

.nav-icon-5 {
  width: 20px;
  height: 15px;
  position: relative;
  cursor: pointer;
  visibility: hidden;
}
.nav-icon-5 span {
  background-color: #fff;
  position: absolute;
  border-radius: 2px;
  transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  width: 100%;
  height: 2px;
  transition-duration: 500ms;
}
.nav-icon-5 span:nth-child(1) {
  top: 2px;
  left: 0px;
}
.nav-icon-5 span:nth-child(2) {
  top: 8px;
  left: 0px;
  opacity: 1;
}
.nav-icon-5 span:nth-child(3) {
  bottom: -1px;
  left: 0px;
}
.nav-icon-5:not(.open):hover span:nth-child(1) {
  transform: rotate(-3deg) scaleY(-0.5);
}
.nav-icon-5:not(.open):hover span:nth-child(2) {
  transform: rotate(3deg) scaleY(1.1);
}
.nav-icon-5:not(.open):hover span:nth-child(3) {
  transform: rotate(-4deg) scaleY(1.1);
}
.nav-icon-5.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 6px;
}
.nav-icon-5.open span:nth-child(2) {
  opacity: 0;
}
.nav-icon-5.open span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 7px;
}

@media (max-width: 715px) {
  .nav {
    visibility: hidden;
  }

  .nav-icon-5 {
    bottom: 80px;
  }

  .nav-icon-5 span {
    visibility: visible;
    background-color: #fff;
  }
}

@media (max-width: 440px) {
  .nav-icon-5 span {
    visibility: visible !important;
    background-color: #fff;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>.WWW Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="Global/navbar.css"
    />
  </head>
  <body>
    <nav>
      <label class="logo">.WWW</label>
      <ul class="nav">
        <li><a href="#" class="active">The Domain</a></li>
        <li><a href="#">The News</a></li>
        <li><a href="#">Interesting Factoids</a></li>
        <li><a href="#">Sign Off</a></li>
        <li>
          <div class="icon nav-icon-5" onclick="Nav()">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </li>
      </ul>
    </nav>
  </body>
  <script></script>
  <script href="main.js">
    const icons = document.querySelectorAll(".icon");
    icons.forEach((icon) => {
      icon.addEventListener("click", (event) => {
        icon.classList.toggle("open");
      });
    });
  </script>
</html>

Solution 1:^[1]

You have to delete unnecessary function Nav on the .icon

@import url("https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap");

* {
  font-family: "Amatic SC", cursive;
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

nav {
  background: #000;
  height: 80px;
  width: 100%;
}

label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  text-transform: uppercase;
  padding: 1px 13px;
  border-radius: 3px;
}

a.active,
a:hover {
  background-image: linear-gradient(
    109.6deg,
    rgba(61, 245, 167, 1) 11.2%,
    rgba(9, 111, 224, 1) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.5s;
}

.nav-icon-5 {
  width: 20px;
  height: 15px;
  position: relative;
  cursor: pointer;
  visibility: hidden;
}
.nav-icon-5 span {
  background-color: #fff;
  position: absolute;
  border-radius: 2px;
  transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  width: 100%;
  height: 2px;
  transition-duration: 500ms;
}
.nav-icon-5 span:nth-child(1) {
  top: 2px;
  left: 0px;
}
.nav-icon-5 span:nth-child(2) {
  top: 8px;
  left: 0px;
  opacity: 1;
}
.nav-icon-5 span:nth-child(3) {
  bottom: -1px;
  left: 0px;
}
.nav-icon-5:not(.open):hover span:nth-child(1) {
  transform: rotate(-3deg) scaleY(-0.5);
}
.nav-icon-5:not(.open):hover span:nth-child(2) {
  transform: rotate(3deg) scaleY(1.1);
}
.nav-icon-5:not(.open):hover span:nth-child(3) {
  transform: rotate(-4deg) scaleY(1.1);
}
.nav-icon-5.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 6px;
}
.nav-icon-5.open span:nth-child(2) {
  opacity: 0;
}
.nav-icon-5.open span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 7px;
}

@media (max-width: 715px) {
  .nav {
    visibility: hidden;
  }

  .nav-icon-5 {
    bottom: 80px;
  }

  .nav-icon-5 span {
    visibility: visible;
    background-color: #fff;
  }
}

@media (max-width: 440px) {
  .nav-icon-5 span {
    visibility: visible !important;
    background-color: #fff;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>.WWW Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="Global/navbar.css"
    />
  </head>
  <body>
    <nav>
      <label class="logo">.WWW</label>
      <ul class="nav">
        <li><a href="#" class="active">The Domain</a></li>
        <li><a href="#">The News</a></li>
        <li><a href="#">Interesting Factoids</a></li>
        <li><a href="#">Sign Off</a></li>
        <li>
          <div class="icon nav-icon-5">
            <span>Menu1</span>
            <span>Menu2</span>
            <span>Menu3</span>
          </div>
        </li>
      </ul>
    </nav>
  </body>
  <script></script>
  <script href="main.js">
    const icons = document.querySelectorAll(".icon");
    icons.forEach((icon) => {
      icon.addEventListener("click", (event) => {
        icon.classList.toggle("open");
      });
    });
  </script>
</html>

Solution 2:^[2]

from your code, I notice you are using floats, but here is a better convention and solution to your code:

in HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>.WWW Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="Global/navbar.css"
    />
  </head>
  <body>
    <nav>
      <label class="logo">.WWW</label>
      <ul class="nav">
        <li><a href="#" class="active">The Domain</a></li>
        <li><a href="#">The News</a></li>
        <li><a href="#">Interesting Factoids</a></li>
        <li><a href="#">Sign Off</a></li>
      </ul>
      <div class="icon nav-icon-5" ">
            <span></span>
            <span></span>
            <span></span>
      </div>
    </nav>
  </body>
  <script></script>
  <script href="main.js">
    const icons = document.querySelectorAll(".icon");
    const nav = document.querySelector(".nav")
    icons.forEach((icon) => {
      icon.addEventListener("click", (event) => {
        icon.classList.toggle("open");
        nav.classList.toggle("menu-open")
      });
    });
  </script>
</html>

in CSS

@import url("https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap");

* {
  font-family: "Amatic SC", cursive;
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

nav {
  background: #000;
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 100px;
}

label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
}

nav ul {
  display: flex;
}


nav ul li a {
  color: white;
  font-size: 17px;
  text-transform: uppercase;
  padding: 1px 13px;
}

a.active,
a:hover {
  background-image: linear-gradient(
    109.6deg,
    rgba(61, 245, 167, 1) 11.2%,
    rgba(9, 111, 224, 1) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.5s;
}

.nav-icon-5 {
  width: 20px;
  height: 15px;
  position: relative;
  cursor: pointer;
  display: none;
}
.nav-icon-5 span {
  background-color: #fff;
  position: absolute;
  border-radius: 2px;
  transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  width: 100%;
  height: 2px;
  transition-duration: 500ms;
}
.nav-icon-5 span:nth-child(1) {
  top: 2px;
  left: 0px;
}
.nav-icon-5 span:nth-child(2) {
  top: 8px;
  left: 0px;
  opacity: 1;
}
.nav-icon-5 span:nth-child(3) {
  bottom: -1px;
  left: 0px;
}
.nav-icon-5:not(.open):hover span:nth-child(1) {
  transform: rotate(-3deg) scaleY(-0.5);
}
.nav-icon-5:not(.open):hover span:nth-child(2) {
  transform: rotate(3deg) scaleY(1.1);
}
.nav-icon-5:not(.open):hover span:nth-child(3) {
  transform: rotate(-4deg) scaleY(1.1);
}
.nav-icon-5.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 6px;
}
.nav-icon-5.open span:nth-child(2) {
  opacity: 0;
}
.nav-icon-5.open span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 7px;
}

@media (max-width: 715px) {
  nav {
    position: relative;
  }
  .nav {
    display: none;
    position: absolute;
    left: 0%;
  }

  .nav-icon-5 {
    display: block;
  }

  nav ul {
    flex-direction: column;
    width: 100%;
  }

  nav ul li {
    margin: 10px 0;
  }

  .menu-open {
    display: block;
    transform: translateY(108px);
    background-color: red;
  }

  .nav-icon-5 span {
    visibility: visible;
    background-color: #fff;
  }
}

@media (max-width: 440px) {
  .nav-icon-5 span {
    visibility: visible !important;
    background-color: #fff;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dali
Solution 2	abdulkareem alabi

'How do you code a hamburger menu to make your navbar appear?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]