Guest Posted January 26, 2021 Share Posted January 26, 2021 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
Beyondspace Posted January 26, 2021 Share Posted January 26, 2021 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? 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, Lightbox Studio pluginIf 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
Guest Posted January 27, 2021 Share Posted January 27, 2021 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
Beyondspace Posted January 27, 2021 Share Posted January 27, 2021 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; } tuanphan 1 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, Lightbox Studio pluginIf 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment