Wie die Website auf dem Handy aussieht und wie das mobile Menü aufgebaut ist

Auf einem schmalen Bildschirm — bis 768 Pixel — baut sich das obere Menü automatisch um, es muss nichts konfiguriert werden:

• Im Header bleiben nur Logo und Begrüßung, rechts der „Hamburger“-Button;
• beim Klick öffnen sich die übrigen Punkte als Liste unter dem Header: Zeile über die volle Breite, Beschriftung zentriert, dünne Linien zwischen den Zeilen;
• ein erneuter Klick oder ein Klick daneben schließt die Liste;
• eine lange Begrüßung, die nicht neben das Logo passt, rutscht komplett in die zweite Zeile, der Button bleibt rechts vom Logo.

Welche Punkte im Header bleiben, ist nicht konfigurierbar: nur Logo und Begrüßung. Alles andere des oberen Menüs befindet sich in der Liste.

Logo. Auf dem Handy wird es in der Breite eingepasst, und die Höhe aus dem Stylesheet wird zu seiner Obergrenze. Es entsteht keine überflüssige Leere über und unter dem Logo.

So prüfen Sie es. Öffnen Sie die Website auf dem Handy oder verkleinern Sie das Browserfenster. Der Umschaltbutton für den Administratormodus auf dem Handy steht als Kreis neben dem „Hamburger“.

Wenn es nicht geklappt hat

• Auf dem Handy ist die Website winzig, wie am Computer. Aktualisieren Sie die Seite mit geleertem Cache: Das Handy könnte eine alte Version der Seite gespeichert haben.
• Die Seite scrollt seitwärts. Ein breites Element im Text stört — eine Tabelle oder ein Block mit fester Breite in Pixeln. Verringern Sie die Breite oder geben Sie sie in Prozent an.
• Der benötigte Button hat sich im „Hamburger“ versteckt. Zum Beispiel „App installieren“. Setzen Sie ihn in den Footer oder als Sektion auf die Seite.