Using a different logo for mobile view – css not working anymore

To see why your method does not work anymore – i have a guess.
The path to background-images on merged Enfold files (css an js) are wrong – that little bug will be corrected in the newest version to come – i guess. (4.5.7)
But you can download here on github a replacement file that fixed it : https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_4_5_5/Url_fix/asset-manager.class.php
( The file you had to upload it via ftp to : ⁨enfold ▸ ⁨config-templatebuilder⁩ ▸ ⁨avia-template-builder⁩ ▸ ⁨php⁩ )
After replacement i guess you have to rebuild the merged files on Enfold ( Child ) ▸ ⁨Performance⁩ ▸ ⁨Delete old CSS and JS files?
_____________
i would have done it by replacing the logo in this case and not changing display or opacity options.
if it is only for mobile – then you can use that snippet in child-theme functions.php from documentation
https://kriesi.at/documentation/enfold/logo/#use-a-different-logo-on-mobile

if it is for small screens – even on desktop use:

function av_dif_mobile_logo(){
?>
<script>
(function($){
	$(window).load(function(){
	if ($(window).width() < 480) {
		$(".logo img").attr("src", "http://kriesi.at/wp-content/themes/kriesi/images/logo.png");}
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'av_dif_mobile_logo');