+31 653 377 944 info@melisgs.nl

    Swap Menu Logo 4 Divi

    door 27 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.

     

     

    Pin It on Pinterest

    Share This