Why is my css nav toggle button is not working?

Question

i was trying to make a toggle button for tablets/phones but it isn't working. The javascript class gets called when i click the toggle button so i don't know what is wrong...

My head where i load my js using defer function to avoid placing it at the end of the body

<script defer src="assets/js/index.js"></script>

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

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

/*my toggle button propertys on desktops*/

.header .nav .nav-toggle {
  color: white;
  background: none;
  border: none;
  font-size: 1.875em;
  padding: 0 1.250em;
  line-height: 60px;
  cursor: pointer;
  display: none;
}


/*for phones*/

@media (max-width: 1024px) {
  .header .nav .nav-toggle {
    display: block;
  }
  .header .nav .nav-menu {
    flex-direction: column;
    align-items: center;
    background-color: #2c3e50;
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    height: calc(100vh - 60px);
    /*100%*/
    overflow-y: auto;
    padding: 1.250em 0;
    left: 100%;
    transition: left 0.3s;
  }
  .nav-menu_visible {
    left: 0;
  }
}

<header class="header">
  <nav class="nav">
    <a href="#" class="logo">Portafolio</a>
    <button class="nav-toggle">
            <i class="fas fa-bars"></i>
        </button>
    <ul class="nav-menu">
      <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
      <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
      <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
      <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
      <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
      <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
    </ul>
  </nav>
</header>

I don't know why my menu isn't moving from left 0 to left 100% (it isn't showing :/)

@HR01M8055 i want that if i click my "toggle button" shows my nav-menu and if i click again the toggle button then it close my nav-menu. — Diego Donoso, Sep 06 '21 at 03:39

DecPK · Accepted Answer · 2021-09-06T03:52:57.047

It doesn't work because of CSS. Your specificity of nav-menu is much more as you have declared as.

.header .nav .nav-menu    // 0 3 0

(x y x) => (id, class, tag)

Either you increase the specificity of .nav-menu_visible or decrease the specificity of .nav-menu

1) Decrease the specificity to 0 1 0 as

.nav-menu                // 0 1 0

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

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

body {
  background-color: black;
}

.header .nav .nav-toggle {
  color: white;
  background: none;
  border: none;
  font-size: 1.875em;
  padding: 0 1.250em;
  line-height: 60px;
  cursor: pointer;
  display: none;
}


/*for phones*/

@media (max-width: 1024px) {
  .header .nav .nav-toggle {
    display: block;
  }
  .nav-menu {
    flex-direction: column;
    align-items: center;
    background-color: #2c3e50;
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    height: calc(100vh - 60px);
    /*100%*/
    overflow-y: auto;
    padding: 1.250em 0;
    left: 100%;
    transition: left 0.3s;
  }
  .nav-menu_visible {
    left: 0;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>



<header class="header">
  <nav class="nav">
    <a href="#" class="logo">Portafolio</a>
    <button class="nav-toggle">
          <i class="fas fa-bars"></i>
        </button>
    <ul class="nav-menu">
      <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
      <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
      <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
      <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
      <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
      <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
    </ul>
  </nav>
</header>

2) You can also increase the specificity to match with nav-menu as

.header .nav .nav-menu_visible {   // 0 3 0

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

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

body {
  background-color: black;
}

.header .nav .nav-toggle {
  color: white;
  background: none;
  border: none;
  font-size: 1.875em;
  padding: 0 1.250em;
  line-height: 60px;
  cursor: pointer;
  display: none;
}


/*for phones*/

@media (max-width: 1024px) {
  .header .nav .nav-toggle {
    display: block;
  }
  .header .nav .nav-menu {
    flex-direction: column;
    align-items: center;
    background-color: #2c3e50;
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    height: calc(100vh - 60px);
    /*100%*/
    overflow-y: auto;
    padding: 1.250em 0;
    left: 100%;
    transition: left 0.3s;
  }
  .header .nav .nav-menu_visible {
    left: 0;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<header class="header">

  <nav class="nav">
    <a href="#" class="logo">Portafolio</a>
    <button class="nav-toggle">
          <i class="fas fa-bars"></i>
        </button>
    <ul class="nav-menu">
      <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
      <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
      <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
      <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
      <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
      <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
    </ul>
  </nav>
</header>

thanks bro, this works like a charm. Can you give me an example of how i can let increase the specificity of .nav-menu_visible ?? i would like to leave it as i had like .header .nav .nav-menu etc... please bro ! — Diego Donoso, Sep 06 '21 at 03:50

score 0 · Answer 2 · answered Sep 06 '21 at 04:00

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
  }

<button onclick="myFunction()">Portafolio</button>



<nav id="myDIV">
  <ul class="nav-menu">
      <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
      <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
      <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
      <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
      <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
      <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
    </ul>
  
    
  </nav>

Why is my css nav toggle button is not working?

2 Answers2