switch logo below certain screen width 1024

The if(wp_is_mobile()) { is a check if you are watching it on a mobile device ! : Link

is that what you try to do – or do you always want to change the logo if the header turns to header top posiiton – even for desktop screens lower than a given value (1024px)

this maybe a quick and dirty way – and please test if it works on other browsers – and mobile browsers too:
( in that case – you do not need those functions.php entries – but i will look if there is a solution for that too)

@media only screen and (max-width: 1024px) {
    .av-logo-container img {
        content: url('https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
    }
}

Can you please remove the relevant snippets from your functions.php (save them to your desktop) and insert this instead?

function change_logo_with_screenwidth(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
	(function($){
		
		// this is for loading the page on smaller screen-width 
		if ($(window).width() < 1025) {
			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
		}
		else {
			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo.png');
		}

		function b() {
			if ($(window).width() < 1025) {
				$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
			}
			else {
				$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo.png');
			}
		}

		$(window).on('debouncedresize', function() {
			b();
		});

	})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'change_logo_with_screenwidth');

we had to see if the srcset inserted images will follow that script …

hm – that works best till now:
:lol

@media only screen and (max-width: 1024px) {
    .av-logo-container img {
        content: url('https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
    }
}

if this also works on mobile devices (I remember that it didn’t work with older browsers), then it is probably the best performing solution. Because a script solution would have to constantly query the screen width, which is why a “debounce and resize” function would have to be used for performance reasons. Enfold itself provides such a function. (Enfold’s debouncedresize function is a performance-optimized way to handle resize events without triggering excessive function calls)

function custom_logo_for_mobile(){
?>
<script>
(function($) {
    function updateLogo() {
        var $logo = $('.logo img'); // Select the logo image
        var mobileLogo 	= "/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.webp";
        var defaultLogo = "/wp-content/uploads/desert-tortoise-council-50th-ann-logo.webp";

        if ($(window).width() <= 1024) {
            $logo.attr('src', mobileLogo); // Use mobile logo
        } else {
            $logo.attr('src', defaultLogo); // Use default logo
        }
    }

    // Trigger logo update on debouncedresize
    $(window).on('debouncedresize', function() {
        updateLogo();
    });

    // Run logo update on initial load
    $(document).ready(function() {
        updateLogo();
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_logo_for_mobile', 20 );

so this works too – but the srcset originally generated (during loading) remains and is then also displayed.
I don’t know how to change the srcset as well. If I switch off the responsive images under Performance, the change of logo images is also displayed at the frontend.