Come unire i due menu di Generate Press in un unico menu mobile

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

Generate Press ha 2 menu, Primary Navigation e Secondary Navigation, il primo è il consueto menu principale, il secondo invece è il menu in altro sopra l’header; quando il sito viene visto da dispositivi mobili, di default vengono creati due menu hamburger separati e, a mio parere, non è proprio un bel vedere, ecco un esempio :

Per ovviare a questo problema, possiamo andare a creare un file JS che contiene le istruzioni per unire i due menu in un unico menu, useremo ovviamente jQuery, vediamo come fare.

(function(document, $, undefined){

function __combineMenus(){

if ( ( $( '.menu-toggle' ).css('display') === "block" ) && $( '.secondary-menu' ).length > 0 ) {

$( '.secondary-menu > li' ).addClass( 'moved-item' );

$( '.secondary-menu > li' ).appendTo( '#site-navigation ul.menu' );

$( '.secondary-navigation' ).hide();

} else if ( ( $( '.menu-toggle' ).css('display') === "none" ) && $( '.secondary-menu' ).length > 0 ) {

$( '.secondary-navigation' ).show();

$( '#site-navigation ul.menu > li.moved-item' ).appendTo( '.secondary-menu' );

$( '.secondary-menu > li' ).removeClass( 'moved-item' );

}

$(document).ready(function () {

__combineMenus();

// run test on resize of the window

$( window ).resize( __combineMenus );

});

})( document, jQuery );

Chiamiamo il file combine_ps_menu.js , ora creiamo un tema child ed al suo interno la cartella “js” dove andremo a copiare il file appena creato; a questo punto apriamo il file functions.php del tema child ed inseriamo l’hook per richiamare il file appena creato; quindi :