WP Menü – Anpassung für die mobile Darstellung

Eine bestehende Website sollte auf mobile Nutzerfreundlichkeit umgestellt werden. Das bisherige Menu musste hierfür umgestellt werden…

Vorarbeit

WordPress Menü
Zunächst muss in WordPress ein Menü erstellt werden (falls noch nicht vorhanden).
Evtl. macht es Sinn in der mobilen Version das Menü tiefer zu staffeln. Unterseiten direkter greifbar zu machen.

Styling Angaben
In meinem Fall wollte ich die Oberseite und Unterseiten angezeigt bekommen.
Styling Angaben hierzu: WordPress_Menu-Styling

Mobile Darstellung

Für die mobile Darstellung einfach das Plugin WP Responsive Menu installieren.
Danach erscheint ein Menupunkt WPR Menu.

Die Einstellungen sind ziemlich selbsterklärend.

Das Plugin erzeugt eine zusätzliche ausklappbare Menu-Struktur. Das vorhandene Menu muss deshalb für die mobile Darstellung ausgeblendet werden. In meinem Beispiel:
@media only screen and (min-width: 320px) and (max-width: 759px) {
<strong>nav ul { display: none; }</strong>

Der Code setzt voraus, dass das Menu so eingebunden wurde:
<nav id="nav-main">
<?php wp_nav_menu(array('theme_location' => 'main')); ?>
</nav>
Andernfalls statt „nav ul„, „menu ul“ oder dergleichen.

Ergebnis

Die Umsetzung ist zu sehen auf der Website Alvernmedia.com
Browser Fenster verkleinern zum Testen