Swap Menu Logo 4 Divi
Een fail-safe manier om logo’s te wisselen in de Primary, Secondary en Mobile header van Divi. Werkt in Explorer, Safari, Edge, Chrome, Firefox en Opera.
JavaScript Swap Menu Logo 4 Divi
<script>
var imageUrl = [
'/wp-content/uploads/Logo_primary.svg',
'/wp-content/uploads/Logo_fixed.svg',
'/wp-content/uploads/Logo_mobile_wide.svg',
'/wp-content/uploads/Logo_mobile.svg',
];
jQuery(window).on('load scroll resize', function() {
var $header = jQuery('header');
var $logo = jQuery('#logo');
if (window.matchMedia('(max-width: 980px)').matches) {
if (window.matchMedia('(max-width: 724px)').matches) {
return $logo.attr('src', imageUrl[3]);
};
return $logo.attr('src', imageUrl[2])
};
if ($header.hasClass('et-fixed-header')) {
return $logo.attr('src', imageUrl[1]);
};
return $logo.attr('src', imageUrl[0])
});
</script>Het standaard DIVI menu kent 4 verschillende weergaven:
- Primair
- Fixed
- Mobiel
- Mobiel breed
Nu is niet elk logo geschikt om weergegeven te worden in al deze weergaven. Dus is het handig voor elk van deze weergaven een apart logo te definiëren.
Logo’s
Upload de 4 logo’s die je gaat gebruiken naar je media library van je WordPress installatie.
Aanpassen URL’s
Op de regels 3 – 6 dien je de URL’s van de 4 logo’s te plaatsen die je gaat gebruiken.
Plaats daarna je JavaScript in [Theme Options] [Integration] [Add code to the <head> of your blog].
Mobiele weergave
Omdat bij sommige mobiele weergaven een breed logo niet écht fraai is, kun je op regel 14 het breekpunt weergeven tot welke breedte het compacte logo te gebruiken.
Dit script werkt ook als je het mobiele menu vast hebt gezet boven aan de pagina.