Responsive Menu, non si può cliccare – non funziona su mobile

Salve, ho riscontrato un problema con il menu del mio sito web www.emanuelenaima.com , realizzato con wordpress. Sono riuscito a creare una combinazione di HTML e CSS affinché il menu, una volta ridimensionato lo schermo si compatta mostrando un 'button' che teoricamente dovrebbe essere cliccato e dovrebbe mostrare il contenuto. Chiaramente non funziona. Ho provato una serie di cose per cui posso constatare che i button nel mio sito funzionano (anche posizionati nel menu), ma quello in particolare ha qualche problema. Qualcuno che può aiutarmi?

HTML/JavaScript/PHP:

Codice PHP:

---

<div class="menu">
<nav id="site-navigation" class="main-navigation">
<button type="button" class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Menu</button>
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
'container' => 'div', // Ensures a div is wrapped around it
'container_class' => 'menu-container' // Custom class for targeting
)
);
?>
</nav>
<?php /* Script per menu piccolo */ ?>
<script>
document.addEventListener("DOMContentLoaded", function () {
const menuToggle = document.querySelector(".menu-toggle");
const menu = document.querySelector("#primary-menu");

menuToggle.addEventListener("click", function () {
menu.classList.toggle("open");
});
});
</script>
</div>

---

CSS:

Codice:

---

/* ---- MENU ---- */

.menu {
    position: relative;
    margin: 0 30px;
    text-align: center;
}

ul#primary-menu {
    display: grid;
    list-style: none;
    grid-auto-flow: column;
    padding: 0;
    margin: 0;
}

.menu > li {
    padding: 0 1em;
    font-size: 1.7em;
    font-weight: 100;
    text-transform: uppercase;
}

nav {
    margin: 30px;
    z-index: 1000;
    position: relative;
}

@media (max-width: 768px) {
    ul#primary-menu {
        display: none;
        flex-direction: column;
        padding: 0;
        margin: 0;
        align-items: center;
    }
       
    .menu > li {
        padding: 1em 0;
        font-size: 1.3em;
    }
       
    .menu.open ul#primary-menu {
        display: flex;
    }
       
    .menu-toggle {
        display: block; !important
                visibility:visible; !important
                        pointer-events: auto !important;
                        opacity:1; !important
                        color: black;
                        background:white;
      font-size: 1.5em;
                        font-weight:100;
                        text-transform:uppercase;
      padding: 0.5em;
      cursor: pointer;
      border: none;
      width: 100%;
      text-align: center;
      position: relative;
    }
}

---

Salve,
il problema è const menu che restituisce null, per via di #primary-menu.

L'uso di document.querySelector() è previsto solo con elementi di tipo tag o nomi di classi CSS e non con gli id. Il carattere # prima del nome, sta ad indicare un id.

Uso con elemnto (tag):

Codice:

---

document.querySelector("a");

---

Uso con classe CSS:

Codice:

---

document.querySelector(".NomeClasse");

---

Esempio dimostrativo che funziona:

Codice HTML:

---

<style>
.bar {
  overflow: hidden;
  background-color: #333;
  position: relative;
}
.bar #myLinks {
  display: none;
}
.bar a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}
.bar a:hover {
  background-color: #ddd;
  color: black;
}
.menu {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}
</style>

<div class="bar">
  <button class="menu" onclick="toggle()">MENU</button>
  <div class="bar active" id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

<script>
function toggle() {
  var x = document.querySelector(".active");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

---

Cordiali saluti.

Citazione:

---

Originalmente inviato da GraphOGLRisorse

Salve,
il problema è const menu che restituisce null, per via di #primary-menu.

L'uso di document.querySelector() è previsto solo con elementi di tipo tag o nomi di classi CSS e non con gli id. Il carattere # prima del nome, sta ad indicare un id.

Uso con elemnto (tag):

Codice:

---

document.querySelector("a");

---

Uso con classe CSS:

Codice:

---

document.querySelector(".NomeClasse");

---

Esempio dimostrativo che funziona:

Codice HTML:

---

<style>
.bar {
  overflow: hidden;
  background-color: #333;
  position: relative;
}
.bar #myLinks {
  display: none;
}
.bar a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}
.bar a:hover {
  background-color: #ddd;
  color: black;
}
.menu {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}
</style>

<div class="bar">
  <button class="menu" onclick="toggle()">MENU</button>
  <div class="bar active" id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

<script>
function toggle() {
  var x = document.querySelector(".active");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

---

Cordiali saluti.

---

Grazie mille! Ho risolto grazie al suo messaggio