Alternate Divi Logo For Mobile

WordPress

I wrote some code that will change the logo URL of a website for mobile.

There is an $alt_logo variable you will need to change to the URL of your alternate logo. You can also change the $threshold variable to change when the logo is swapped.

<script type="text/javascript">
(function($) {
        $(document).ready(function() {
            // Change to the URL of the alternate mobile logo
            var $alt_logo = '/wp-content/uploads/freshysites-logo-green.png';
            // Original logo URL
            var $logo = $('#logo').attr('src');
            // Mobile width threshold in pixels
            var $threshold = 767;

            // This will fire when document is ready:
            $(window).resize(function() {
                // This will fire each time the window is resized:
                if ($(window).width() <= $threshold) {
                    // if smaller or equal
                    $('#logo').attr('src', $alt_logo);
                } else {
                    // if larger
                    $('#logo').attr('src', $logo);

                }
            }).resize(); // This will simulate a resize to trigger the initial run.
        });

    })(jQuery);
</script>

Just add the code to the “Body” area of the Divi > Theme Options > Integration section, or to the “Footer” area of the Settings > Header and Footer Plugin.

Menu
Google Rating
5.0
Based on 243 reviews
Get a Quote