Responsive menu voor mobiel

Hoi,

Het thema van die klant heeft geen mobiele weergave van het menu? Welke thema is dat?

Voor mobiel scherm kun je het best een knop bovenaan plaatsen waar het menu uitklapt als je erop klikt. Ivm de beperkte ruimte die je hebt. Kan niet zonder JavaScript / jQuery overigens. Als je dit wilt laat maar even weten.

Guido

Hoi,

Ik begrijp dat je dus de kennis hebt om het thema aan te passen.

Je zou voor een eenvoudig mobiel menu die van één van mijn thema’s kunnen gebruiken (link).

1) Download mijn thema op je PC en unzip het.
2) Kopieer mijn thema-map /js met inhoud naar de hoofdmap van jouw thema.
3) Open bestand functions.php van jouw thema en voeg dit toe:

function mobile_nav_script() {
	wp_enqueue_script( 'mobile-nav', get_template_directory_uri() . '/js/nav.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'mobile_nav_script' );

4) Open je header bestand voeg dit toe op de gewenste plek:

<div class="mobile-nav-container">
	<button class="mobile-nav-toggle"><?php _e( 'Menu' ); ?><?php _e( ' +' ); ?></button>
	<div class="mobile-nav">
		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
	</div>
</div>

Let op: meestal heeft het hoofdmenu de ID “primary” maar dus niet altijd. Menu’s worden meestal in bestand functions gedefinieerd.

5) Open je stylesheet (waarschijnlijk bestand style.css) en voeg dit toe:

/* Verberg in groot scherm */
.mobile-nav-container {display:none;}
.mobile-nav-toggle {display:none;}
.mobile-nav {display:none;}

/* Toon in mobiel scherm */
@media screen and (max-width:767px) {
	.mobile-nav-container {display:block; clear:both; padding:0 0 20px; text-align:left;}
	.mobile-nav-toggle {display:block; clear:both; margin:0 auto; padding:10px 15px;}
	.mobile-nav {clear:both; padding:10px 20px; background:#f8f8f8; border-bottom:1px solid #ddd;}
	.mobile-nav .subnav-toggle {position:absolute; float:right; display:block; top:0; right:0; padding:5px 10px;}
	.mobile-nav ul {list-style:none; margin:0; padding:0;}
	.mobile-nav ul li {position:relative; margin:0; padding:0;}
	.mobile-nav ul li a {display:block; margin:0 0 10px; padding:0 0 10px; border-bottom:2px dotted #ddd; line-height:2; text-decoration:none;}
	.mobile-nav .sub-menu li {margin:0 0 0 20px;}
}

Deze CSS kun je natuurlijk naar wens aanpassen.

Volgens mij was dit hem..

Guido

Hallo Maurice,

Voor zover ik kan nagaan zou dit gewoon moeten werken.

Heb je ook een live site waar je dit hebt toegevoegd?

Guido

Hoi Maurice,

Het huidige mobiele schuifmenu van die site is dus verouderd? Want hij werkt nog prima merk ik.

Je kunt de bouwer van dit thema (Frisser) dus niet meer benaderen, voor een update?
Zo niet, dan kun je het beste dat thema even kopiëren naar een testomgeving en daar aan de slag gaan. Ipv met Twenty Twenty-One. Want mijn code moet gewoon werken, zonder fouten. Als je er echt niet uitkomt wil ik dat tegen een kleine vergoeding ook wel even toevoegen, maar dan moeten we contact met elkaar opnemen buiten dit forum.

Guido