CSS flex-wrap: wrap Link verteilt sich auch auf 2 Zeilen und wird gestreckt

[Segelflugpilot]

ah okay, dann schau ich da mal rein. Muss ich morgen machen.
Ja die Zeiten wollte ich auch noch reduzieren, steht noch auf meinem to-do Zettel nach diesem ärgerlichen Problem. Danke!

edit: tja die Animationszeit konnte ich schnell reduzieren. Mit dem Menü bin ich aber immer noch nicht schlauer geworden.
Eine Größe ab 31rem hilft zwar, aber dann sieht es ab 320px so aus (siehe Anhang). Es wird also nicht die komplette Breite angezeigt. Ich bekomme das gerade irgendwie nicht gelöst
Auch ist das leider keine richtig gute Lösung, da das Bild dann so groß wird. Habt ihr sonst einen Vorschlag?

edit2: Ich habe mir jetzt erstmal behelfsmäßig beholfen und das Bild wird jetzt kleiner dargestellt mit dem grauen Rahmen, der eigentlich darunter liegt. Es sieht nicht schön aus, aber es funktioniert. Für Tipps zu einer sauberen Lösung wäre ich aber dankbar

 

[Bagbag]

Magst du das aktuelle Problem nochmal genauer beschreiben? Wenn ich auf der Seite bin, ist mir grad nicht ganz klar was das Problem ist.

 

[Segelflugpilot]

Aber na klar. Wenn man die Auflösung reduziert hat, dass das Hamburger Menü kommt, bzw am besten direkt auf 320px Breite, dann öffnete man das Menü und klickt auf den Menüpunkt Anwälte. Dadurch wird das Menü länger. Klickt man nun auf keinen Link, sondern schließt das Menü, dann fährt es nach oben. Problem war, dass das Menü zu lang war und man nun noch einen Teil gesehen hat.
Der Vorschlag von Darrel hat das Problem "gelöst", indem ich von bei 320px media von 20 rem für das Logo (Hauptbild) auf 31 rem für die Höhe gegangen bin. Nun sieht man das Menü zwar nicht mehr, aber das Logo ist sehr hoch geworden. Das würde ich gerne vermeiden.

Neues Problem war, dass das Bild jetzt zwar hoch ist, aber durch background-size Cover gezoomt wurde und nicht komplett in der Breite sichtbar war.

 

[Bagbag]

Du meinst .section-logo? Wenn ich das auf 20rem stelle, passt meines erachtens alles bei dem Menü

 

[Segelflugpilot]

Exakt ja. Man müsste jetzt bei
@Media (min-width: 320px)
.section-logo {
height: 20rem;
Wiederherstellen. Ich habe das auch für die Größen danach angepasst. Vielleicht lag es daran, da du nicht ab 320px bist, das geht ja nur bis 400px. Es könnte aber auch jetzt gehen, da ich bei 320px noch mehr geändert habe. Sprich bei 320px steht zum Logo nur die Anpassung der Höhe auf 20rem, den Rest auch deaktivieren. (sprich das 30% 30% auf jeden Fall.)
Ich kann das leider gerade nicht nachprüfen, da ich nur mobil unterwegs bin und gleich zur Hochzeit muss morgen früh geht es bei mir wieder zum testen.
Danke aber für deine Mühen!!!

 

[Darrel]

Also ich fand das Hintergrundbild mit den alten Werten und ohne so viel grau als Rahmen besser.

Wenn es nur darum geht, dass man das Menü nicht sieht, während man ein längeres Untermenü geöffnet hat, dann reicht eigentlich eine Änderung (zumindest funktioniert das bei mir dann einwandfrei):

@media (min-width: 320px)
.section-logo {   
    height: 20rem;
}

#nav {
    top: -120%; /* Hier einfach einen höheren negativen Wert eingeben wie z.B. -200% */
}

(Das Problem ist meiner Meinung nach aber eher die Logik, dass die Höhe des Menüs von dem selben container gesetzt wird, der die Maße des Bildes bereitstellt. Ich hätte die beiden Sachen wahrscheinlich getrennt.)

Und noch eine Kleinigkeit: Die Untermenüs lassen sich bei mir nicht mit einem erneuten Klick schließen, nur als Hinweis, falls das noch nicht auf deiner To-Do-Liste steht.

 

[Segelflugpilot]

ohja das fand ich auch. Ich musste das erstmal nur irgendwie lösen.

Ja, das ist ein gekauftes Template, so viel wie ich inzwischen daran geändert habe, hätte ich das inzwischen auch selbst machen können. Aber ich hatte es mir nicht zugetraut.

Deine Lösung hat auf jeden Fall funktioniert danke!

Bzgl. Schließen der Menüpunkte. Da habe ich abseits von Javascript noch keine Lösung für gefunden, die auf Touch auch geht. Wenn ihr mir sagt, dass das irgendwie geht, setzte ich das natürlich um. Denn mich ärgert das auch. Jetzt muss ich aber schnell zur Hochzeit