Wie ihr ja wisst, bin ich seit einigen Jahren ein immer grösserer Fan vom WordPress Framework mit dem Name DIVI von Elegant Themes .

Nun wer dieses Theme einsetzt und ein fixed Header haben möchte, der kann das mit einem Klick machen (ohne Divi 4 Theme Builder). Das Problem dass dann aber gibt ist, dass der Header beim runterscrollen schrumpft.

Als Beispiel – so sieht ein Header aus wenn man zu oberst ist.

Wenn man dann aber runter scrollt, dann schrumpft der Header zusammen

In diesem Beispiel ist dann das Logo weg – bei anderen ist auch die 2. Headerzeile (das in Orange) weg.

Man kann das aber verhindern, in dem man ein kleiner Javascript in die Divi einbaut. Man geht dazu im Backend zu ≪Theme Optionen≫ -> ≪Integration≫ und dann zu ≪Code dem < head > Ihres Blogs hinzufügen≫ und fügt den folgenden JS Code da hinein.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
(function(){
    // Override the addClass to prevent fixed header class from being added
    var addclass = jQuery.fn.addClass;
    jQuery.fn.addClass = function(){
        var result = addclass.apply(this, arguments);
            jQuery('#main-header').removeClass('et-fixed-header');
        return result;
    }
})();
jQuery(function($){
    $('#main-header').removeClass('et-fixed-header');
});
</script>

Nachher kann man die Seite im Frontend neu laden und zack ist der Header immer so wie er am Anfang war – er schrumpft nicht mehr.