Trick # 313 | Dieser Beitrag beinhaltet 486 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Hin und wieder möchte man dass das Website-Logo das Navigationsmenü überragt. Weder mit dem Standardmenü des Divi-Themes noch mit dem Divi-Menümodul ist das über die Einstellungen möglich. Trotzdem funktioniert es: Für beide Navigationsarten benötigen Sie unterschiedlichen, aber einfachen CSS-Code.
Beginnen wir mit dem Menümodul des Divi-Themes:
Überlappendes Logo im Divi-Menümodul
Dafür ist nur ein winziges bisschen CSS-Code erforderlich. Sie können ihn direkt in das Menümodul einfügen. Gehen Sie also in die Kopfzeile Ihres Theme Builders (oder wo auch immer Sie das Menümodul platziert haben) und öffnen Sie dessen Einstellungen. Gehen Sie auf die Registerkarte «Erweitert», klicken Sie auf «Benutzerdefiniertes CSS» und suchen Sie das Feld «Menü-Logo». Hier können Sie die untenstehenden zwei Zeilen CSS-Code einfügen, damit das Logobild die Menühöhe überragt:
margin-top: -30px;
margin-bottom: -30px;Doch es gibt auch noch das Standardmenü. Für dieses ist die Vorgehensweise leicht anders:
Überlappendes Logo im Divi-Standardmenü
Es gibt Fälle, bei denen auch das Logo des Divi-Standardmenüs überragt werden sollen. Dafür benötigen Sie erneut ein wenig CSS-Code – Sie finden ihn in der Folge. Kopieren Sie ihn ins CSS-Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS:
/* Logohöhe auf Desktop-Monitoren festlegen */
@media only screen and (min-width: 981px) {
#logo {
min-height: 100px;
}
}
/* Logohöhe und Überlappung auf Tablet- und Smartphone-Anzeigen festlegen */
@media only screen and (max-width: 980px) {
#logo {
max-height: 80%;
width: auto;
max-width: 80%!important;
}
}Werbung
Werbung
