WordPress kann nur über Plugins mehrsprachig umgesetzt werden. WPML und Polylang sind dabei die bekanntesten. Leider wird die Darstellung der Sprachen im Menü nur notdürftig unterstützt. Ohne gute Kenntnisse von CSS, hat man keine Chance!

Genauso ist es mir bei den letzten Projekten gegangen. Es kamen die Themes Divi und Avada sowie das Plugin Polylang zum Einsatz. In allen Kombinationen sah das Design vor, die Sprachen in Kurzform mit Trennstrich (DE | EN) in die Navigation einzubinden.

Nebeneinander ist unproblematisch, doch der Trennstrich und die farbliche Hervorhebung der aktiven Sprache wird nicht angeboten.

Trennstrich mit CSS einbauen (Avada und Polylang)

Bei der Konfiguration von Polylang ist wichtig, den Namen der Sprache verkürzt zu vergeben (ansonsten wird der komplette bzw. keine Abkürzung im Menü angezeigt).

In Polylang Sprachnamen verkürzt eintragen
Name der Sprache in Kurzform vergeben (erste Spalte)

Im Menü erstellt man (falls noch nicht geschehen) einen Sprachumschalter fest.

Sprachumschalter zum Menü hinzufügen (WordPress / Polylang)
Sprachenumschalter zum Hauptmenü hinzufügen

In den Details des Menüeintrags stellt man auf „Darstellung der Sprach-Namen“ um.

Details in den Menü-Optionen

Im Ergebnis erscheinen die Sprachen neben einander, aber ohne Trennstrich:

Normale Sprachdarstellung ohne CSS Anpassungen
So sieht das Menü ohne Design-Anpassungen aus

Um es so aussehen zu lassen wie im folgenden Bild, benötigen wir ein paar Zeilen CSS-Code

Sprachenumschalter mit Trennstrich bzw. Pipe-Zeichen
So soll es aussehen

Zuerst möchten wir einen Abstand zum Hauptmenü haben:

/* Abstand nach links */
#menu-item-1555-de {margin-left:150px;}

Bitte nicht einfach kopieren! Vorher müssen Sie noch die Menü-Item-Zahl herausfinden. Klicken Sie dafür mit der rechten Maustaste auf „DE“ und lassen sich den Code dafür anzeigen (in Firefox heißt es „Element untersuchen“).

Im Code schauen Sie nach dem übergeordneteten Listenpunkt. Dort ist die menu-item-Nummer hinterlegt:

Sprachen Id suchen
Oben steht die gesuchte id=“menu-item-1555-de“

Als nächstes fügen wir den Trennstrich mit CSS ein:

#menu-hauptnavigation li#menu-item-1555-de .menu-text::after
 {
	content:' |';
	color:#000;
}

Damit etwas mehr Abstand ist bzw. der Abstand zwischen Strich und den Sprachnamen gleich ist, benutzt man folgendes CSS:

/* Sprachumschalter mehr Abstand  */
.fusion-main-menu ul li.lang-item 
{padding-right:8px !important;}

Wer sich an dem Unterstrich stört, kann mit diesem CSS eingreifen:

/* Unterstrich entfernen */
.fusion-header-layout-v1.fusion-top-header .fusion-main-menu a.fusion-bottombar-highlight::after
{
    border-top-style:none !important;
   
}

Die inaktive Sprache kann man auch anders darstellen; hier in grau:


.fusion-body .fusion-main-menu ul li.lang-item.current-lang a {
color:#ccc;
}

Sprachumschalter mit Trennstrich mit DIVI und Polylang

Genauso wie Avada benutzt auch DIVI mehrere Designvorlagen für die Darstellung des Menüs. In diesem Beispiel ist das Menü mit mobiler Ansicht gewählt. Dies hat natürlich Auswirkungen auf die genutzten HTML-Anweisungen bzw. CSS-Auszeichnungen.

Also bitte nicht blind kopieren!

.et_header_style_fullscreen ul#mobile_menu_slide>li#menu-item-3938-de>a::before {
    content: "| ";
    margin-left: 5px;
    position: relative;
    top: -1px;
    font-weight: bold;
}
Trennstrich im DIVI-Theme zwischen den Sprachen

Wer mit WPML arbeitet oder ein anderes Theme benutzt, sollte mit den CSS-Grundbausteinen und etwas ausprobieren auch eine Lösung finden 🙂