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

[emanuelenaima]

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:

                <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:

/* ---- 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;
    }
}

[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):

document.querySelector("a");

Uso con classe CSS:

document.querySelector(".NomeClasse");

Esempio dimostrativo che funziona:

<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.

[emanuelenaima]

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):

document.querySelector("a");

Uso con classe CSS:

document.querySelector(".NomeClasse");

Esempio dimostrativo che funziona:

<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