Trick # 358 | Dieser Beitrag beinhaltet 410 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Wenn Sie den Standard-Header verwenden, der mit dem Divi-Theme installiert wird, kann es Ihnen ein Bedürfnis sein, diesen nicht von Beginn weg anzuzeigen. Den Seitenkopf zunächst (und bis zum Scrollen) zu verbergen, geht mit ein wenig Code.
Um den Standard-Seitenkopf des Divi-Themes beim Aufruf der Website zu verstecken, benötigen Sie etwas jScript-Code. Kopieren Sie also den folgenden Block und fügen Sie ihn in den <head>-Bereich Ihrer Website ein – im Backend unter Divi/Theme-Optionen/Integration:
<script>
jQuery(function($) {
var fadetime = 500;
var mh = $('#main-header');
var body = $('body');
var width = parseFloat(body.css("width"));
$(window).scroll(function(){
if (width >= 964) {
if ($(this).scrollTop() > 1) {
mh.fadeIn(fadetime);
} else {
mh.fadeOut(fadetime);
}
}
});
$(window).resize(function(){
width = parseFloat(body.css("width"));
if (width < 964 || $(this).scrollTop() > 1) {
mh.show();
} else {
mh.hide();
}
});
});
</script>
Nun noch ein kurzer CSS-Block – diesen kopieren Sie in das CSS-Stylesheet Ihrer Website. Im Backend unter Design/Customizer/Zusätzlöiches CSS:
@media only screen and (min-width: 981px) {
#main-header {
-moz-transition: all 0s ease-in-out;
-webkit-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
display: none;
}
#page-container {
padding-top:0 !important;
}
.et_secondary_nav_enabled #page-container {
padding-top:33px !important;
}
}
Das war’s schon.
Der Code, wie er da steht, greift bloss auf Desktop-PCs – also auf Anzeigen, welche breiter als 981 Pixel sind. Meist wird dies passen. Falls Sie aber den Seitenkopf auf ALLEN Anzeigen bis zum Scrollen ausblenden möchten, entfernen Sie im CSS-Code lediglich die Zeilen 1 und 14.
Werbung