Color of header during shrink transition

Hey Briana,

Here is the code you can put in functions.php in child theme:

add_action('wp_footer', 'ava_new_custom_script');
function ava_new_custom_script(){
?>
<script type="text/javascript">
(function($) {
    var lastScrollTop = 0;
    var target = $(".container.av-logo-container");

    $(window).on('scroll', function() {
        st = $(this).scrollTop();

        if(st < lastScrollTop) { 
            if (st <=  2) {
            	target.css("background-color", "rgba(255, 255, 255, 0.5)");
            }

        }
        else {
            target.css("background-color", "#fff");

        }
        lastScrollTop = st;
    });
})(jQuery);
</script>
<?php
}

Also you might want to pay attention to the header on mobile, the logo seems to be too big.
If you need further assistance please let us know.
Best regards,
Victoria