How to Change Fixed Header Logo

Running of Yigit’s advice (https://kriesi.at/support/topic/alternate-logo-for-fixed-navigation/#post-230794) I created a class fixedlogo and placed it inside my header.php file, just above the logo:

<div class='container'>
<div class="fixedlogo"></div>
                        <?php
                        /*
                        *	display the theme logo by checking if the default logo was overwritten in the backend.
                        *   the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
                        */
                        echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', false, 'strong');

To allow the fixed logo div to transition, I set its opacity to 0, rather than display: none;.

.fixedlogo { opacity: 0; }
	
.header-scrolled .fixedlogo {
	display: block;
	width: 40px;
	height: 40px;
	top: 4px;
	background: url('http://site.com/fixedlogo.png') no-repeat;
	background-size: 35px 35px;
	float: left;
	position: absolute;
	left: 0;
	z-index: 1;
	-webkit-transition: opacity 0.5s ease-in;
	-moz-transition: opacity 0.5s ease-in;
	-o-transition: opacity 0.5s ease-in;
	opacity: 1;
}	
	
.header-scrolled .logo { display: none; }

Hope this helps anyone wondering!

Note: I placed this in my Desktop Styles media query, so I could do something similar for mobile.