Lesefortschritt:

Überlappendes Website-Logo im Menü-Modul und/oder im Standardmenü des Divi-Themes

28. Januar 2024 | CSS-Stylesheet, Divi-Theme

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;
Die Pixelwerte müssen Sie vermutlich anpassen – je nachdem, wie gross Ihr Logo und die gewünschte Überlappung ist. Sie können jeden beliebigen Wert verwenden. Pröbeln Sie, bis es passt.

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;
	}
	}
Auch diese Werte sind beispielhaft und dafür gedacht, dass Sie sie an Ihre Begebenheiten anpassen. Die Werte hängen ganz von der Höhe und Breite Ihres Logos ab und davon, wie viel Überlappung Sie zeigen möchten.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This