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
  • Replies 3
  • Views 997
  • Created
  • Last Reply
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 picker form field)
💫 Gallery block 7.1 workaround
🥳 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 picker form field)
💫 Gallery block 7.1 workaround
🥳 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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.