To add a gif image next to Navigation Bar in Squarespace, you can follow these steps.
#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>
