Alternate Divi Logo For Mobile

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.


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.

See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles