Sottomenu che esce fuori dallo schermo

[albertomarini]

Buonasera, sto creando un sottomenu con al suo interno 5 voci. Nelle ultime due voci di questo sottomenu vi sono i seguenti pulsanti: "Social" e "Multimedia".

Il problema è che mi ritrovo con il menu che, invece di andare "a capo" su un'altra riga a causa di mancanza di spazio, procede fuori dal browser rendendo, di fatto, impossibile leggere e cliccare sulla relativa voce. Non solo, ho riscontrato anche la presenza di una netta distanza tra i pulsanti Social e Multimedia.

Come è possibile risolvere questo problema? In allegato un'immagine che mostra quanto accaduto.

Grazie mille

[PrinceEntree8]

Ciao @albertomarini, mi sembra che questo argomento sia già stato trattato in #10 dove @borisamico suggerisce di aggiornare alla ultima versione.

Buona serata, Edoardo

[albertomarini]

Buonasera @PrinceEntree8, la versione che attualmente sto utilizzando è proprio la 1.4.5, quella suggerita da @borisamico. Tuttavia, il sottomenu presenta ancora questa problematica.

Buona serata!

[PrinceEntree8]

Buona sera @albertomarini hai provato ad applicare il codice CSS suggerito da @dmp21-dev in https://github.com/italia/design-wordpress-theme-italiaWP2/issues/10#issuecomment-771600127 ?

[albertomarini]

Grazie per la rapida risposta @PrinceEntree8 . Con il codice CSS in #10 , il sottomenu viene mostrato correttamente in verticale. Può essere una buona soluzione per ovviare a questo problema.

Spero che, con i futuri aggiornamenti, il sottomenu in versione orizzontale diventi ancor più responsive per adattarsi correttamente a finestre di qualsiasi dimensione possibile.

Grazie mille!

[PrinceEntree8]

Ciao @albertomarini, In effetti anche a me succede facendo una prova con l'ultima versione. Sono però riuscito ha trovare un modo tramite Javascript - dato che non conosco né PHP né la struttura di WordPress e non saprei dove mettere le mani - per risolvere questo problema (viene applicato agli elementi con più di un sotto-menu:

        $("#menu-principale>.menu-item-has-children").each(
        function() {
            $this = $(this);
            let $ul = $($this.find("ul")[0]);
            if($ul.children().length > 1){
                $this.addClass('megamenu');
            }
        });

questa variante invece non controlla quanti elementi ci sono all'interno del menù dunque applica megamenu a prescindere

        $("#menu-principale>.menu-item-has-children").each(
        function() {
            $this = $(this);
            let $ul = $($this.find("ul")[0]);
            $this.addClass('megamenu');
        });

da aggingere nel file static/js/tema.js dopo la riga 157

        $('.megamenu .dropdown-menu').click(function (e) {
            e.stopPropagation();
        }); // dovrebbe essere questa la riga 157

oppure aggiungendo megamenu al file italiawp2/inc/class-wp-bootstrap-navwalker.php alla riga 140:

            // Add .dropdown or .active classes where they are needed.
            if ( $args->has_children ) {
                $classes[] = 'dropdown'; // diventa 'dropdown megamenu'
            }

Esempi

Solo più di un elemento: Sempre:

[borisamico]

Salve, grazie mille per i contributi. Ho cercato di fare un merge (che pubblicherò con la prossima versione del tema) fra la soluzione parziale che avevo trovato qualche versione fa e i suggerimenti di @PrinceEntree8 in modo da applicare la classe "megamenu" a tutti i sottomenu con più di 4 voci, e sistemare i dropdown allineandoli a destra per le voci a menu (con massimo 3 voci) che sono sulla parte destra dello schermo.

[albertomarini]

Buongiorno, ho provato a testare il merge realizzato. Nel caso di menu con più di 4 voci, come posso mantenere il tutto in verticale senza applicare la classe "megamenu"?

Attualmente sto utilizzando il frammento di codice di dmp21-dev del thread #10.

Inoltre, il problema della fuoriuscita degli elementi dallo schermo continua a sussistere. Inserendo 8 voci come sottovoci di un elemento del menu, con la visualizzazione megamenu, fuoriescono non rendendo possibile l'utilizzo del menu

Grazie

[delavex76]

Io ho risolto modificando il file /htdocs/wp-content/themes/italiawp2/inc/scripts.js Non si capisce perché il template debba attivare megamenu quando si inserirscono più di 3 items.....mah. Comunque basta modificare il codice intorno alla linea 139:

if(ul.children().length < 4) { if (((i + 1) > (numLi / 2)) && (posiLi > largWi)) { $(this).find("ul.dropdown-menu").addClass("drodownmenu-on-right"); } }else{ $(this).addClass('megamenu'); }

cambiando il valore dell' ul.children().length < 4 in ul.children().length < 50 ad esempio il megamenu non si attiverà fino a 49 items