Swap Menu Logo 4 Divi
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>
- 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.