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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
(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 :
|
1 2 3 4 5 |
add_action( 'wp_enqueue_scripts', 'combine_ps_menu', 1009 ); function combine_ps_menu() { wp_enqueue_script( 'combine-menu', get_stylesheet_directory_uri() . 'https://mk0alessioangel8kd7h.kinstacdn.com/js/combine_ps_menu.js', array(), GENERATE_VERSION, true ); } |
A questo punto i due menu saranno uniti e unificati in un unico hamburger menu.
Programmatore WordPress esperto WooCommerce, sviluppo di plugin con interfaccia amministrativa.
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
