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? 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
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 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment