Per far visualizzare correttamente la versione mobile ho dovuto agire su alcuni elementi css, modificando padding o altri parametri. Ho notato che quando si clicca sulla voce che fa aprire il submenu nel passaggio da display hidden a display block, guardando la sezione ispeziona di chrome, noto che nella classe ul submenu appaiono molto rapidamente una serie di padding e margin con molti numeri che si aggiornano rapidamente. Questo comporto probabilmente uno sforzo del sistema, infatti ma transizione non è molto fluida. Perché accade? Grazie ancora! In realtà penso non ci sia bisogno di spostare in JS perché avrei risolto con questo codice che mi ha suggerito chatGPT e che funziona:

codice:
  function isMobile() {    return window.innerWidth < 920;
  }


  $(".header__menu .menu-item-has-children > a").click(function(e) {
    if (isMobile()) {
      e.preventDefault();
      $(this).next('.sub-menu').slideToggle();
    }
  });
Rimane un problema che non ho capito se va affrontato lato CSS o in altra maniera...

Ho notato che quando si clicca sulla voce che fa aprire il submenu, nel passaggio da display hidden a display block, guardando la sezione ispeziona di chrome, noto che nella classe relativa al submenu appaiono molto rapidamente una serie di padding e margin, con molti numeri che si aggiornano rapidamente. Il tutto avviene in una frazione di secondo ma sono riuscito a fare uno screen esemplificativo:


Questo comporta probabilmente uno sforzo del sistema, infatti la transizione non è molto fluida (com'è invece quella che apre il menu principale quando si clicca sull'hamburger).

Perché accade?
Forse ho usato un approccio sbagliato nelle media queries?

Forse al posto di modificare il submenu per adattarlo alla versione mobile avrei dovuto crearne uno ex novo?

Oppure tutto ciò ha a che fare con la presenza della parte JS?