Trick # 460 | Dieser Beitrag beinhaltet 675 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Heute wenden wir uns einem Fall zu, der vor allem bei hochformatigen Website-Logos auftritt: Es wird im Standard-Header des Divi-Themes entweder sehr klein dargestellt oder dann in einem riesigen Header. Es gibt aber eine Lösung, die wir Ihnen heute zeigen. Mit dieser ragt das Logo einfach ein Stück weit über den Header hinaus.
Bei Website-Logos, welche nicht im Querformat gestaltet sind, kann es schwierig sein, den Inhalt des Logos innerhalb des Headers (hier grau hinterlegt) zu erkennen. So wie nebenan:
Um den Header aber nicht völlig überdimensionieren zu müssen und das Logo trotzdem in ausreichender Grösse darzustellen, benötigen Sie ein wenig CSS-Code.
Den folgenden Block fügen Sie dazu in das Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
#top-header {
z-index: 99999;
}
#logo {
max-height: 220%;
margin-top: 5px;
z-index: 100000;
}
@media only screen and (max-width : 980px) {
#logo {
margin-top: 0px;
}
}Mit dem Code wird das Logo den Header überlappen und auch den obersten Teil des Seiteninhalts abdecken. So wie im Beispiel hier:
Das ist natürlich nur ein Exempel. Wahrscheinlich müssen Sie die Werte für «max-height» und «margin-top» anpassen, bis Sie das Logo genau da haben, wo Sie es möchten. Jedes Logo ist anders – wir empfehlen Ihnen darum, ein wenig mit den Werten zu spielen, bis es gut ausschaut.
Übrigens: Falls Sie zusätzlich zum Überlappungseffekt noch darauf angeweisen sind, dass das Logo beim Scrollen geschrumpft dargestellt wird, empfehlen wir Ihnen den Beitrag «Website-Logo überlappen und beim Scrollen schrumpfen lassen».
Werbung
Werbung
