Ja gut. Das Icon ist nun sichtbar. Die Überschrift ("calandar") ist nun eine h1. Habe nun: ~~~ CSS .flyout-box { display: flex; justify-content: end; overflow: hidden; } .flyout-box > button[aria-expanded] { width: 113px; height: 160px; background: transparent; color: transparent; border: none; margin: 0.7rem; } .flyout-box > .flyout-content { display: block !important; width: var(--flyout-width); margin-right: calc(-0.3em - var(--flyout-width)); transition: margin-right 0.85s; visibility: hidden; } .flyout-box [aria-expanded="true"] ~ .flyout-content { margin-right: 0; } .flyout-box button.content-visible ~ .flyout-content { visibility: visible; } ~~~ Für den icon eingefügt aber es tut sich noch NICHTS! Woran liegt es? Deine weiteren Anmerkungen zum Beispiel bezüglich der : Elemente etc. gehe ich heute Abend in Ruhe durch. Erstmal möchte ich die Animationen fertig haben. Was mich jetzt aber noch stört ist die Höhe von **ul** bei der Hauptnavigation. Ich glaube man sieht es auch schon. Die Höhe von ul bestimmt irgendwie #main-nav. Toll wäre es jetzt wenn also das **ul** anfangs so hoch wie der Hamburger-Button, wenn das Menü sich öffnet passt sich die Höhe an den Content vom **ul** an. Ist das machbar? Denn so sieht es irgendwie nicht aus. T.

Ja gut. Das Icon ist nun sichtbar. Die Überschrift ("calandar") ist nun eine h1. Habe nun: ~~~ CSS .flyout-box { display: flex; justify-content: end; overflow: hidden; } .flyout-box > button[aria-expanded] { width: 113px; height: 160px; background: transparent; color: transparent; border: none; margin: 0.7rem; } .flyout-box > .flyout-content { display: block !important; width: var(--flyout-width); margin-right: calc(-0.3em - var(--flyout-width)); transition: margin-right 0.85s; visibility: hidden; } .flyout-box [aria-expanded="true"] ~ .flyout-content { margin-right: 0; } .flyout-box button.content-visible ~ .flyout-content { visibility: visible; } ~~~ Für den icon eingefügt aber es tut sich noch NICHTS! Woran liegt es? Deine weiteren Anmerkungen zum Beispiel bezüglich der : Elemente etc. gehe ich heute Abend in Ruhe durch. Erstmal möxhte ich die Animationen fertig haben. Was mich jetzt aber noch stört ist die Höhe von **ul** bei der Hauptnavigation. Ich glaube man sieht es auch schon. Die Höhe von ul bestimmt irgendwie #main-nav. Toll wäre es jetzt wenn also das **ul** anfangs so hoch wie der Hamburger-Button, wenn das Menü sich öffnet passt sich die Höhe an den Content vom **ul** an. Ist das machbar? Denn so sieht es irgendwie nicht aus. T.

Ja gut. Das Icon ist nun sichtbar. Die Überschrift ("calandar") ist nun eine h1. Habe nun: ~~~ CSS .flyout-box { display: flex; justify-content: end; overflow: hidden; } .flyout-box > button[aria-expanded] { width: 113px; height: 160px; background: transparent; color: transparent; border: none; margin: 0.7rem; } .flyout-box > .flyout-content { display: block !important; width: var(--flyout-width); margin-right: calc(-0.3em - var(--flyout-width)); transition: margin-right 0.85s; visibility: hidden; } .flyout-box [aria-expanded="true"] ~ .flyout-content { margin-right: 0; } .flyout-box button.content-visible ~ .flyout-content { visibility: visible; } ~~~ Für den icon eingefügt aber es tut sich noch NICHTS! Woran liegt es? Deine weiteren Anmerkungen zum Beispiel bezöglich der : Elemente etc. gehe ich heute Abend in Ruge durch. Erstmal möxhte ich die Animationen fertig haben. Was mich jetzt aber noch stört ist die Höhe von **ul** bei der Hauptnavigation. Ich glaube man sieht es auch schon. Die Höhe von ul bestimmt irgendwie #main-nav. Toll wäre es jetzt wenn also das **ul** anfangs so hoch wie der Hamburger-Button, wenn das Menü sich öffnet passt sich die Höhe an den Content vom **ul** an. Ist das machbar? Denn so sieht es irgendwie nicht aus. T.