Swop logo i Divi når man Scroller ned

Jeg anbefaler at det første der skal gøres, er at lave et Child theme. Derved overskrives ændringerne i temafilerne ikke, ved fremtidige opdateringer af temaet.

En let løsning til at lave et Child theme er f.eks. at bruge et plugin. Jeg har selv startet med at brugt plugginet Child Theme Configurator, som er super nem at sætte op.

Efter du oprettet et Child theme og valgt det som tema, laver du en kopi af filen header.php da det er i header filen at du skal sætte lidt kode ind.

Hvis du på nuværende tidspunkt ikke har uploadet det andet logo til medie biblioteket, det som du ønsker at swoppe det orginale med, skal det gøres nu (det er det logo som jeg referere til som logo2)

Maker Logo2 i medie biblioteket, så man kan se detaljer om billedet

Nu hvor billede detaljerne er fremme kopier og sæt URLen ind i f.eks. Notepad.

Gå i  Kontrolpanelet -> Udseende -> Editor

Her kan temas header fil redigeres.

I denne fil skal man finde følgende originale kode:

Og indsætte følgende kode:

Nu indsættes logo2s URL (som tidligere blev gemt i Notepad), hvor der i koden står “2nd logo url”

Til sidst mangler nu kun lidt CSS-magi

Følgende kode sættes ind i Kontrrolpanel -> Divi -> tema tilpasser -> Ekstra CSS

/*———————————————————-*/
/*——– [ SWAP LOGO // on scroll  ] ——*/
/*———————————————————-*/

#logo2 {
 display: none;
 }

.et-fixed-header #logo {
 display:none;
 }

.et-fixed-header #logo2 {
 display:inline;
 }

Nu skulle logoerne gerne Swoppe når der Scrolles på siden.

Alt efter indstillingerne i header kan det godt være man også er nød til at give .et-fixed-header #logo2 en max-height og padding-top

God fornøgelse