Heute habe ich eine Frage zur Änderung des Aussehens des Menüs im Twenty Thirteen Theme erhalten:

Wie kann ich zwischen die Menüpunkte einen Trennstrich einbauen?

Dafür ergänze ich

.nav-menu li a {
color: #fff; /*neue Textfarbe */
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}

mit der Zeile:

border-right: 1px solid #000;

zu

.nav-menu li a {
color: #fff; /*neue Textfarbe */
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
border-right: 1px solid #000;
}

Damit ist jetzt ein Trennstrich auf der rechten Seite vom jeweiligen Menüpunkt.

  • 1px ist die Rahmenstärke,
  • solid ist die Rahmenart (es gibt noch dashed und dotted für gestrichelt und gepunktet),
  • #000 ist die Rahmenfarbe, in diesem Fall Schwarz.

Der letzte Strich ist natürlich überflüssig, daher heben wir mit dem Pseudo-Befehl „:last-child“ diese Formatierung für das letzte <li> – bzw. <a>-Element wieder auf:

.nav-menu li:last-child a {
border-right:none;
}

Fertig 🙂

Vielen Dank an WalterD für die Frage!

Sie haben auch ein Problem? Nur zu – ich werde versuchen eine Antwort zu finden und hier zu veröffentlichen..