MENU MOBILE

Non è propriamente inerente a wp, ma spesso i menu mobile dei siti lasciano un po’ a desiderare quindi si può adottare una semplice soluzione : possiamo creare due div, uno per il menù desktop e uno per il menù mobile
Ad esempio :

<div class="menu-desktop">							
	<div class="menu-desktop__menu-container">
		<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
	</div>
</div>
							
								
<div class="menu-mobile" data-menu-mobile>

	<a class="header__menu-wrapper__logo" href="<?php echo get_home_url(); ?>">
		<?php
			$logo = get_field("red_tmp_logo","options"); // vedremo poi dopo questa funzione del plugin ACF
			if ($logo != null){
				echo "<img src='{$logo}' alt=''>";	
			}
		?>
	</a>
	
	<div class="menu-mobile__navigation" data-menu-wrapper>
		<div id="menu_mobile" class="menu-mobile__navigation__label" data-menu-trigger>
			<span class="menu-mobile__navigation__label__icon menu-mobile__navigation__label__icon--closed"></span>
			<span class="menu-mobile__navigation__label__icon menu-mobile__navigation__label__icon--opened"></span>
		</div>
		<div class="menu-mobile__navigation__content" data-menu-container>
			<div class="menu-mobile__navigation__content__scroll">
				<?php wp_nav_menu( array( 'theme_location' => 'main-menu-mobile', 'menu_class' => 'menu clear_both' ) ); ?>						
			</div>
		</div>
	</div>
</div>

 

Tramite js (e sfruttando la funzione click, con aggiunta e rimozione di classi) e css, gestiremo poi il tutto.