Underline navigation links with an image on hover

I created an image of this pink underline and want my navigation links to underline with this image when hovered over and while active. With my current Squarespace template, I can't even get my navigation links to be underlined when I hover over them.

10 hours ago, Noraneko said:

I created an image of this pink underline and want my navigation links to underline with this image when hovered over and while active. With my current Squarespace template, I can't even get my navigation links to be underlined when I hover over them.

You can do it with custom css, what is your site url?

11 hours ago, bangank36 said:

You can do it with custom css, what is your site url?

the URL is azusamcwilliams.com. The site isn't updated yet to look like my screenshot but I'm assuming the custom CSS wouldn't change once I update everything?

1 hour ago, Noraneko said:

the URL is azusamcwilliams.com. The site isn't updated yet to look like my screenshot but I'm assuming the custom CSS wouldn't change once I update everything?

You can upload the underline image into Custom css and update this snippet accordingly

.Header-nav-item.Header-nav-item--active,
.Header-nav-item:hover{
  position: relative;
}
.Header-nav-item.Header-nav-item--active:after,
.Header-nav-item:hover:after {
  content: '';
  width: 100%;
  max-width: 150px;
  height: 20px;
  position: absolute;  
  bottom: -50%;
  left: 50%;
  transform: translateX(-50%);
  background: url( your-image-url-here );
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}