CSS code in header to switch between Mobile header image & desktop header image

the logo itself is no background-image. For shrinking version you need a real image there :

you can change the logo by adding this to functions.php of your child-theme
if you want to have a different logo on mobile advices (even for ipad air etc)

function avia_custom_mobile_logo(){
if(wp_is_mobile()){
?>
 <script>
	jQuery(".logo img").attr("src", "http://path-to-mobile-logo/logo.png");
 </script>
<?php
}
}
add_action('wp_footer', 'avia_custom_mobile_logo');

if you like to have a different logo for small screen width. – that is something different. – and on performance reasons it is always problematic to measure screen-width permanently. – so on this case a debouncing could be a good advice

function av_dif_mobile_logo(){
?>
<script>
	jQuery(window).load(function(){
	if (jQuery(window).width() < 480) {
		jQuery(".logo img").attr("src", "http://path-to-logo/logo.png");}
	});
</script>
<?php
}
add_action('wp_footer', 'av_dif_mobile_logo');