Swap Menu Logo 4 Divi

door Jackey van Melis27 januari 2018

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.

Swap Menu Logo 4 Divi

Logo’s

Aanpassen URL’s

Mobiele weergave

Pin It on Pinterest