header menu to sidebar toggle not working-CodePudding

I'm tryng to make a responsive header menu . The main idea is that an sidebar will substitute the navigation bar links with the width of the screen and an icon with an onclick function to toggle that sidebar will appear at the header. I made de HTML and CSS, but can't make the JS function to add a class to the navigation menu (to show it) work. BTW i'm a begginer developer, started a month ago and still struggling a lot (the code also has a lot of placeholders and temporary CSS properties

HTML:

<!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>Portfolio</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <header id="header">
    <div id="container">
      <nav id="nav-bar">
        <a href="/" id="nav-brand">Placeholder.</a>
        <ul id="nav-menu">
          <div id="nav"><li><a id="link" href="#about-me">01. Sobre mim</a></li></div>
          <div id="nav"><li><a id="link" href="#experience">02. Experiência</a></li></div>
          <div id="nav"><li><a id="link" href="#projects">03. Projetos</a></li></div>
          <div id="nav"><li><a id="link" href="#contact-me">04. Contato</a></li></div>
          <div id="nav"><button id="resume-btn">Currículo</button></li></div>
        </ul>  
        <div >
          <h3 onclick="handleMenuToggle()">&#9776</h3>
        </div>         
      </nav>
    </div>
  </header>
  <main>
    <section id="introduction">
      <div>
        <h2>
          Hi, my name is
        </h2>
      </div>
      <div>
        <h2>
          Placeholder
        </h2>
      </div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
      </p>
    </section>
    <section id="about-me">
      <h2>01. About me</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
      </p>
    </section>
    <section id="experience">
      <h2>02. Experience</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
      </p>
    </section>
    <section id="projects">
      <h2>03. Projects</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
      </p>
    </section>
    <section id="contact-me">
      <h2>04. Contact me</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
      </p>
    </section>
  </main> 
</body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-color: rgba(10,25,48,255);
  height: 1000px;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: blueviolet;
}

#container {
  width: 1800px;
  margin: auto;
}

#nav-bar {
  width: 95%;
  margin: auto;
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

@media(max-width:1800px) {
  #container {
    width: 100%;
  }
}

#nav {
  margin: auto 30px;
}
 
.menu-icon {
  display: none;
}

@media only screen and (max-width: 900px) {
  #nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    display: block;
    background-color: brown;
    margin: 0;
    height: 100%;
    box-shadow: -1px -1px 8px #3e3e3e99;
    width: 250px;
    transition: all 0.8s ease;
  }

  .show-nav {
    right: 0;
  }

  #nav {
    text-align: center;
    margin: 20px auto;
  }

  .menu-icon {
    display: block;
    margin: auto 0;
    padding: 0 20px;
    font-size: 30px;
    cursor: pointer;
  }
}

#link {
  margin-right: 15px;
  color: white;
  text-decoration: none;
  transition: color 0.15s;
}

#link:hover {
  color: gray;
}

#resume-btn {
  font-size: 15px;
  color: white;
  background-color: rgba(10,25,48,255);
  border-color: white;
  border-style: solid;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

#resume-btn:hover {
  color: gray;
  border-color: gray;
}

li {
  list-style: none;
}

h2 {
  color: white;
}

p {
  color: aqua;
}

Javascript:

function handleMenuToggle() {
  const navContainer = document.getElementById('nav-menu')
  navContainer.classList.toggle('show-nav')
}

Can't make Js onclick function work to toggle sidebar.

CodePudding user response：

You're so close to getting this to work. You just need to change one line in your CSS to make it work (see the working demo below):

/* add #nav-menu to this declaration */
  #nav-menu.show-nav { 
    right: 0;
  }

The issue is CSS specificity. Because you've used an ID to declare the right property at -100%, even when you add the show-nav class to the element, the class alone in the declaration doesn't have enough specificity to override the right property value.

Learn more about css specificity here.

function handleMenuToggle() {
  const navContainer = document.getElementById('nav-menu')
  navContainer.classList.toggle('show-nav')
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-color: rgba(10,25,48,255);
  height: 1000px;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: blueviolet;
}

#container {
  width: 1800px;
  margin: auto;
}

#nav-bar {
  width: 95%;
  margin: auto;
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

@media(max-width:1800px) {
  #container {
    width: 100%;
  }
}

#nav {
  margin: auto 30px;
}
 
.menu-icon {
  display: none;
}

@media only screen and (max-width: 900px) {
  #nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    display: block;
    background-color: brown;
    margin: 0;
    height: 100%;
    box-shadow: -1px -1px 8px #3e3e3e99;
    width: 250px;
    transition: all 0.8s ease;
  }

  #nav-menu.show-nav {
    right: 0;
  }

  #nav {
    text-align: center;
    margin: 20px auto;
  }

  .menu-icon {
    display: block;
    margin: auto 0;
    padding: 0 20px;
    font-size: 30px;
    cursor: pointer;
  }
}

#link {
  margin-right: 15px;
  color: white;
  text-decoration: none;
  transition: color 0.15s;
}

#link:hover {
  color: gray;
}

#resume-btn {
  font-size: 15px;
  color: white;
  background-color: rgba(10,25,48,255);
  border-color: white;
  border-style: solid;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

#resume-btn:hover {
  color: gray;
  border-color: gray;
}

li {
  list-style: none;
}

h2 {
  color: white;
}

p {
  color: aqua;
}

<header id="header">
    <div id="container">
      <nav id="nav-bar">
        <a href="/" id="nav-brand">Placeholder.</a>
        <ul id="nav-menu">
          <div id="nav"><li><a id="link" href="#about-me">01. Sobre mim</a></li></div>
          <div id="nav"><li><a id="link" href="#experience">02. Experiência</a></li></div>
          <div id="nav"><li><a id="link" href="#projects">03. Projetos</a></li></div>
          <div id="nav"><li><a id="link" href="#contact-me">04. Contato</a></li></div>
          <div id="nav"><button id="resume-btn">Currículo</button></li></div>
        </ul>  
        <div >
          <h3 onclick="handleMenuToggle()">&#9776</h3>
        </div>         
      </nav>
    </div>
  </header>
  <main>
    <section id="introduction">
      <div>
        <h2>
          Hi, my name is
        </h2>
      </div>
      <div>
        <h2>
          Placeholder
        </h2>
      </div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
      </p>
    </section>
    <section id="about-me">
      <h2>01. About me</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
      </p>
    </section>
    <section id="experience">
      <h2>02. Experience</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
      </p>
    </section>
    <section id="projects">
      <h2>03. Projects</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
      </p>
    </section>
    <section id="contact-me">
      <h2>04. Contact me</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit neque vitae sint illo, excepturi totam quia atque deserunt aut quasi modi molestias dignissimos quibusdam quidem nostrum eligendi, saepe voluptas. Omnis?
      </p>
    </section>
  </main>