Menüleiste für Mobile anpassen

[Rolf B]

Hallo Theresa,

bist Du sicher, dass Du auf dem Smartphone ein zweispaltiges Layout haben willst? Auf einem Tablet mag das noch gehen, aber Smartphone, das könnte eng werden.

Die Menüleiste ist dieses braun-orange Ding mit "Work" und "Contact"? Die kriegt man natürlich nach unten, aber die Frage wäre: Was passiert, wenn der Anwender die Seite scrollt? Soll sie dann unten bleiben? Und angenommen, du bist auf einem Tablet und hast Platz für 2 Spalten - was ist mit dem Inhalt von Spalte 3?

Ich glaube, dein Layout hat mehr Probleme als nur die Menüleiste.

Grundsätzlich wäre Grid-Layout eine Lösung für Dich. Unser Wiki weiß eine Menge darüber. Zusammen mit @media Queries kannst Du die Anordnung deiner Inhalte damit umgestalten.

Das geht mit Einsatz der "Grid Maltechnik" in etwa so; ich nehme jetzt einfach mal an dass zwei Spalten auf dem Smartphone für dein Layout sinnvoll sind. Die Umschaltung erfolgt, wenn genug Platz ist. "50em" sind um die 800 Pixel, je nach Font. Damit dürfte deine Seite auf Desktop-Monitoren und zumindest auch auf Tablets im Querformat dreispaltig werden.

body {
   display: grid;
   grid-template: "area1 area2" 1fr
                  "logo  logo" auto
                  "menu  menu" auto
                 / 1fr   1fr;
}

@media (min-width: 50em) {
   body {
      grid-template: "area1 area2 area3" 1fr
                     "empty logo  menu" auto
                    / 1fr   1fr   1fr;
   }
}
/* Festlegen, dass ein HTML Element mit class="area1" im benannten
   Gridbereich namens area1 platziert wird */
.area1 {
   grid-area: area1;
}

Wie man es genau machen muss, insbesondere die Frage, was mit den Inhalten von Area 3 bei schmalen Bildschirmen ist, wäre noch zu klären. Und die Frage, ob man auf einem Smartphone Logo und Menü nicht besser nach oben legt, möchte ich auf aufwerfen. Mit grid-template ist das kein Problem. Schreib den Bereichsnamen einfach anderswo hin.

Rolf