Hallo Experten,
meine mit WordPress 4.8.1 erstellte Homepage https://bibelwelt.de (Theme Leeway mit einigen Veränderungen in einem Child Theme) hat zwei sehr große Navigationsmenüs mit acht bzw. sechs Menü-Punkten, deren Untermenüs in einer dritten Ebene zum Teil noch einmal Untermenü-Punkte enthalten. Bis zu einer Bildschirmbreite von 1070px verwende ich daher nur die Navigation über die ≡-Buttons, die sich beim Draufklicken einfach nach unten öffnen. Bei größeren Bildschirmen klappen sich im Normalfall die Unter-Untermenü-Punkte nach rechts auf. Bei der Top-Navigation (schwarz, oberste Leiste) ist das kein Problem, da die beiden Menü-Punkte ganz rechts keine Unter-Untermenü-Punkte enthalten. Aber wenn bei der Haupt-Navigation (rot - rechts neben dem Bibelwelt-Logo) die Untermenü-Punkte nach rechts aufklappen, dann verschwinden sie aus dem Sichtfeld.
Um dieses Problem zu lösen, habe ich in meinem Child-Theme einen CSS-Code eingegeben, der im Browser Firefox dazu führt, dass die Untermenüs erstens nicht zu breit angezeigt werden (6,3 cm) und zweitens nach links statt nach rechts aufklappen (denn nach links ist unterhalb des Bibelwelt-Logos ja noch genug Platz).
Nun habe ich probeweise auch mal die Homepage in anderen Browsern angeschaut und gesehen, dass sowohl bei Chrome als auch bei Opera die nach links aufgeklappten Menüs ganz anders aussehen. Das nach unten aufgeklappte Menü besteht nur aus einem 1,3 cm breiten weißen Streifen (aus dem nach rechts die Beschriftung der Untermenü-Punkte herausragt, allerdings unleserlich, weil nicht weiß hinterlegt), und evtl. vorhandene Unter-Untermenü-Punkte klappen zwar nach links auf, aber ebenfalls nur 1,3 cm weit.
Meine veränderten Code-Zeilen im Child-Theme sehen so aus:
/* Hauptmenü-Untermenüs schmaler nach links ausklappen statt nach rechts, nicht für Tablets und Smartphones*/
@media not screen and (max-width: 1070px) {
.container {
}
.main-navigation-menu ul a {
max-width: 0;
}
.main-navigation-menu ul a {
min-width: 12.5rem;
}
.main-navigation-menu li ul ul {
left: -103.5%;
}
}Hat jemand eine Idee, warum die Browser unterschiedlich auf den Code reagieren?
Viele Grüße
Helmut