nav li:first-of-type u. nav li:last-of-type

[Rolf B]

Hallo Gustav,

dein Home-Icon sieht so aus:

<li>
   <a id="homeS" aria-current="page"></a>
</li>

Das Home-Bild ist Hintergrundbild des li-Elements. Die Farbe Grau setzt Du für das a Element. Das sind zwei Gründe, warum die Farbe nicht wirkt.

• auf einem Kind-Element gesetzt statt auf dem Element selbst
• ein background-image wird von color nicht mal peripher tangiert.

Das aria-current Attribut bleibt sinnvollerweise auf dem a Element stehen. Aber ich schlage Dir folgende Änderungen vor:

• Verschiebe das Attribut id="homeS" vom a auf's li Element. Dadurch kannst Du das li mit #homeS ansprechen statt mit li:first-of-type, das ist robuster falls Du das Home-Menü anderswo haben willst. Das würde ich analog auch mit dem Sprachmenü machen.
• Lasse das Padding auf den nav li Elementen ganz weg und verwende dort padding:0. Passend dazu gib den nav a Elementen width:100%; height:100%, damit sie ihr li Element vollständig ausfüllen.
• Damit das li für das Home-Menü breiter wird (z.B. 5em), mach es so wie im Sprachmenü. Verwende statt flex-grow:0 zum Beispiel dies:

#homeS { flex: 0 0 5em; }

• Setze das Home-Bild als Hintergrundbild des a Elements, nicht des li Elements. Aber eigentlich... dieses Bild ist keine Deko, sondern essenzieller Teil der Seite. Man könnte hier auch ein <img> Element mit aussagekräftigem alt-Text (alt="Startseite") verwenden.

Wie macht man nun Häuschen und Text der aktiven Seite grau? Den Text bekommt man mit color:gray hin. Für das Bild gibt es mehrere Möglichkeiten.

1. stelle ein zweites Bild bereit, das grau ist
2. erstelle gestapelte Hintergründe. Zuunterst das schwarze Häuschen, darüber eine Ebene mit 50% transparentem Weiß. Das geht elegant mit einem Lineargradienten (linear-gradient(0, #fff8, #fff8)). Dadurch wird das schwarze Haus grau. Hintergrundbilder stapelt man, indem man sie per Komma auflistet, das oberste zuerst:

nav a[aria-current=page] {
   background-image: linear-gradient(0, #fff8, #fff8), url(/img/haus.png);
}

3. oder setze für das a Element der aktiven Seite opacity=0.5;. Dadurch brauchst Du auch für die Texte kein color:gray mehr, weil die Teiltransparenz alles schwarze grau erscheinen lässt. Aber Du könntest Dir mit teiltransparenten Menüs andere Probleme einfangen. Es sähe jedenfalls so aus:

nav a[aria-current=page] {
   opacity:0.5;
}

Damit wird das Element für die aktuelle Seite halb durchsichtig. Wenn das Häuschen ein <img> im a Element ist, oder Hintergrund des a Elements, erscheint es dadurch grau statt schwarz. Der Effekt ist, dass sowohl Häuschen als auch Text statt schwarz nun grau erscheinen. Wenn Dir die Opacity andere Probleme macht (teiltransparente Menüs lassen ggf. etwas durchscheinen, was sie nicht sollen). Meine Empfehlung wäre die teiltransparente Weißschicht.

Nun zum Sprachmenü.

• align-items auf dem Summary-Element ist sinnlos und kann weg. Diese Eigenschaft gilt nur für Elemente mit display:flex oder grid.
• details und summay sind Blockelemente, d.h. sie breiten sich auf 100% Breite aus, aber die Höhe ist ein Problem. Du hast keinen direkten Inhalt, darum solltest Du für beide height:100% angeben, damit das li Elternelement vertikal ausgefüllt wird.
• dein globeB.svg ist großer Mist. Dieses SVG ist lediglich ein 30x30 Container für ein PNG, das als Image URL gespeichert ist. Und das SVG setzt keine Viewbox, deshalb ist es 300px breit und reagiert ungnädig auf Prozentangaben im background-position. Nimm das SVG vom Globe-Icon aus der Wikipedia, das ist gemeinfrei, besteht aus Pfaden und ist 355 Bytes statt 5346 Bytes groß.

Das musst Du nun richtig positionieren. Ich habe in den Entwicklertools experimentiert.

nav summary {
    background: url(../img/globeB.svg) 1.5em 0.2em no-repeat;
    height: 100%;
    padding: 0 0 0 0.5em;
    outline: .8px solid transparent;
    text-align: left;
    line-height: 2em;
}

Dabei ist: padding-left: Linke Position des Details-Pfeils
line-height: Vertikale Position des Details-Pfeils
background: Platzierung des SVG - dein SVG. Da genügt die Angabe einer Position, aber hier funktionieren keine Prozente, weil dein SVG keine viewbox hat.

Das Wikipedia-SVG hat auch keine Viewbox, es bringt aber eine Größe von 420px mit. Darum muss man es skalieren, wenn man es verwendet. Die Skalierung wird mit einem Schrägstrich hinter die Position geschrieben.

nav summary {
    background: url(globe_icon.svg) calc(50% - 1.5em) 0.2em / auto 80% no-repeat;
    ...
}

Damit funktioniert es in der Breitansicht eigentlich ganz gut. Was steht da eigentlich? background ist eine Kombi-Eigenschaft, und ich setze mit dem, was da oben steht, 4 Einzel-Eigenschaften.

   background-image: url(...);  
   background-position: calc(50% - 1.5em) 0.2em;  
   background-size: auto 80%;  
   background-repeat: no-repeat;  

Bei Position und Size steht erst die x, dann die y Komponente. Und die X-Position berechne ich: 50% - 1.5em, also den linken Rand des Bildes erstmal genau in die Boxmitte, und dann 1.5em nach links. Die Spaces um das Minus sind wichtig, sonst funktioniert das nicht. Die Formel passt für Schmal- und Breitansicht ganz gut.

Die Schmalansicht ist aber trotzdem noch reichlich fritte. Ich würde display:flex nur in der Breitansicht setzen. Da musst Du übrigens aufpassen, du setzt display:flex für das nav li an 2 Stellen (Zeile 22 und 84). Ich würde es da an beiden Stellen entfernen und nur in Zeile 94 verwenden (nav li für die breite Ansicht). In der Schmalansicht steht ja eh alles untereinander, und die flex-grow/shrink/basis Angaben aus der Breitansicht stören hier nur. Für eine saubere Menüansicht sollten die li eine height-Angabe bekommen (z.B. 2em), und im Sprachmenü musst Du (im Media Query-Teil) das padding-left anpassen, so etwa auf 40%.

Good Luck 😀
Rolf