Jump to content

Underline navigation links with an image on hover

Recommended Posts

10 hours ago, Noraneko said:

1868754291_ScreenShot2021-01-25at9_11_58PM.png.7bbeca1a61734cf02a7af9554fa3ae58.png

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.