Vertikale Nav-Leiste in Flexbox fixieren

[Rolf B]

Hallo - hm - Michael, würd ich mal behaupten ;) (es ist doof, jemanden mit "keineahnung" anzureden).

Du solltest versuchen, das Seitenlayout konsistent mit Grid aufzubauen. Im Moment hast du einen Header, der über die ganze Breite geht, und das macht es unnötig kompliziert. Wenn ich ein bisschen stöbere, haben alle Seiten das gleiche Layout:

• das violette Kreuz als Seiteneinteilung
• oben rechts euren Namen und euer Titel-Icon
• sechs Links im vertikalen Kreuzbalken
• vier Links im horizontalen Kreuzbalken
• ein großer Hauptbereich rechts unten
• und ein Datenschutzlink, der im Moment oben rechts rumgeistert und da bestimmt nicht bleiben soll...

Ein Grid ist dafür durchaus okay. Und du hast deine Elemente auch schon so angeordnet, dass sie im schmalen Modus halbwegs sinnvoll untereinander stehen.

Was Du mit der Jahreslosung meinst, habe ich nicht verstanden. Ich sehe sie auf der Seite nicht, und kann mir aus dem, was Du gepostet hast, keine Vorstellung machen wo die landen soll.

Ich hätte nur eine Grundüberlegung anzubieten.

Dein Kreuz teilt die Seite in 9 Bereiche, nämlich 3 Reihen mit 3 Spalten. Mehr nicht. Das kannst Du mit grid-template sehr schön darstellen. Allerdings - man sollte eine Seite nicht breiter als 60em machen. Ansonsten wird das schlecht lesbar. Nachteilig kann nun sein, dass der horizontale Kreuzbalken dann auch nicht breiter wird als 60em, und weil er ein Deko-Element ist, darf er ruhig breiter werden. Dafür - und nur dafür - würde ich dem Grid 5 Spalten geben, in denen sich der Kreuzbalken ausbreiten kann.

body {
  width: 100vw;
  min-height: 100vh;
  margin: 0 auto;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden scroll;
  display: grid;
  grid-template: ".    .   losung logo               ." auto
                  "y   y   stamm  menü               m-over" auto
                  ".   .   stamm  main               ." 1fr /
                   1fr 3em 10em   minmax(20em, 50em) 1fr;
}

body? Ja, body. Einen Extracontainer braucht man nicht.

Ich muss etwas rumfrickeln. width:100vw bedeutet: Bildschirmbreite. Aber wenn ein vertikaler Scrollbalken erscheint, zieht der Browser den nicht von 100vw ab und es erscheint automatisch auch ein horizontaler Balken. Den will ich nicht sehen, darum overflow: hidden scroll.

Das Grid-Template verwendet benannte Bereiche. Bzw. einfach einen Punkt für Bereiche, denen ich keinen Namen geben will. Das kannst Du Dir in unserem Wiki anschauen, allerdings seh ich dass ich da nochmal ran muss...

Die grid-template Eigenschaft definiert jedenfalls ein Raster aus benannten Bereichen. Je Zeile kannst Du eine Höhe angeben, und nach einem / kommen die Breitenangaben für die Spalten.

minmax ist ein Breitenbereich: von 20em bis 50em.

Ich hab mal ein Fiddle gemacht, da fehlt die Layout-Umschaltung bei 720px (was eh nicht die beste Idee ist, man sollte Mediabreaks in em festlegen, damit die Breaks sich an Fontänderungen anpassen). Probier einen guten Wert aus, ich denke, ab 45em kannst Du in die Grid-Ansicht schalten. Darunter dann die einfache "alles untereinander" Ansicht. Ich deute die Umschaltung durch einen Farbschleier über dem Hintergrundbild an...

Ich hoffe, ich habe verstanden, was Du mit der Losung meintest.

Das Fiddle soll zeigen, wie wenig HTML Du brauchst, um sowas aufzubauen. Die variable Fontgröße, die Du drin hast - das würde ich mir nochmal überlegen. Da schwankst Du zwischen wuchtig und winzig. font-size: 1.7vw variiert zu stark; das Thema hatten wir vor einiger Zeit im Forum und sind überein gekommen, dass man hier mit calc arbeiten sollte, z.B. so:

font-size: calc(0.8em + 0.4vw);

Wenn Dein @media-Break bei 45em liegt, sind 0.4vw 0.18em. D.h. als Mindestgröße hast Du 0.98em. Ein breites Fenster mit 120em ergibt 0.48em, in Summe 1.28em Fontsize. Du kannst mit dem em-Wert als Basisangabe und dem vw-Wert als flexible Angabe etwas rumspielen. Mach's halt weder zu klein noch zu groß.

Mit wird's jetzt zu spät; guck es Dir mal an und wenn was unklar ist, frag gerne. Ich sage auch nicht, dass mein Vorschlag der Weisheit letzter Schluss ist. Aber wenn was da ist, kann man drüber reden 😉

Ökumenische Grüße aus dem kath. Rheinland...
Rolf