Jump to content

Underline navigation links with an image on hover

Recommended Posts

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.

Link to comment
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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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?

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

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.