Add a gif next to navigation bar

#1. Use this code to Custom CSS box

nav {
    align-items: center;
}
nav.header-nav-list:after {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/66a8f52d108a8a093bdb3bbb/21a24414-3127-48ad-81cb-e07ca87ec4a5/2_2.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-left: 1vw;
}

Result:

#2. If you want to make the gif clickable, use this code to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<a href="https://google.com" target="_blank" class="patreon-logo"><img src="https://i.postimg.cc/7PnsxF6C/Patreon-logo-1.png"/></a>').appendTo('nav.header-nav-list');
});
</script>
<style>
a.patreon-logo img {
    width: 50px;
}
nav {
    align-items: center;
}
</style>