How to add a gif next to the navigation bar in my header and link it to a page?

I'm wanting to put a gif image in my header beside my main navigation bar, where the red circle is in the image below.

I'd like it to be spaced evenly apart from the other links as if it's the next item and for the gif to be hyperlinked.

I haven't been able to figure out how to do this using CSS. Anyone know how to do this?

Thank you

Can you share the website URL and URL of the GIF?

This is the url of the gif: https://images.squarespace-cdn.com/content/66a8f52d108a8a093bdb3bbb/21a24414-3127-48ad-81cb-e07ca87ec4a5/2_2.gif?content-type=image%2Fgif

Website url: www.hobbesedits.com

Can you share your site wide password?

This is the site password: d7;tBU

On 8/12/2024 at 1:58 PM, tuanphan said:

Use this code to Website Tools > Custom CSS

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;
}

Thank you! Works perfectly.