Trick # 466 | Dieser Beitrag beinhaltet 712 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Ein Hack, der vor allem bei hochformatigen Logos interessant sein kann und der einen Trick aus der Praxis von Dr. Code ergänzt: Das überlappende Logo, welches beim Scrollen automatisch schrumpft. Ganz einfach zu machen, mit ein wenig CSS-Code.
Besonders hochformatige Logos sind schlecht lesbar, wenn Sie den Standard-Header des Divi-Themes verwenden und nichts an der Logo-Darstellung machen. Das kann dann aussehen, wie im Beispiel nebenan:
Eine Lösung wäre es, den Header höher darzustellen. Da würde auch das Logo mitvergrössert. Elegent ist das aber meist nicht.
Um das Problem gleichwohl zu lösen, benötigen Sie etwas CSS. Den folgenden Block fügen Sie dazu in das Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
#et-info {
float: right;
}
.et_fixed_nav #top-header {
position: fixed;
z-index: 9998!important;
}
#logo {
max-height: 200px;
margin-top: -30px;
}
.et-fixed-header #logo {
max-height: 100px!important;
margin-top: 0px;
}
@media only screen and (max-width: 980px) {
#logo {
max-height: 70px;
margin-top: 0px;
}
#et-info {
float: none;
}
}Mit dem Code wird das Logo den Header überlappen und auch den obersten Teil des Seiteninhalts abdecken. So wie im Beispiel hier:
Scrollen Sie ein wenig auf der Seite, wird das Logo hingegen schrumpfen. Siehe im Beispiel nebenan:
Freilich: Jedes Logo ist anders gestaltet – wir empfehlen Ihnen darum, ein wenig mit den Werten zu spielen, bis es korrekt passt.
Übrigens: Wenn Sie den Logo-Schrumpfeffekt nicht benötigen, kann Ihnen auch der Beitrag «Website-Logo den Header und Inhalt überlappen lassen» dienlich sein, den wir unlängst veröffentlicht haben.
Werbung
Werbung
