Lesefortschritt:

Standard-Header des Divi-Themes verstecken und erst beim Scrollen einblenden

3. Juli 2024 | CSS-Stylesheet, Divi-Theme, Scripts

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

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