Adding custom hover effects to nav elements & Featured Collections product names (Prestige theme)

[nic126]

Hi everyone! We are looking for some help adding custom hover effects to a couple of areas on our website. Here is a preview link of our theme launching hopefully tomorrow: https://tw5sruj7dylpi400-51000180893.shopifypreview.com

First up, the main site navigation – we want to add a custom hover effect that looks like a highlight in #ffe5e7, like the below mockup shows:

Secondly, on the 'Bestsellers' Featured Collection module, we want to add a custom squiggle underline effect under the product name when a user hovers over one (and also remove the price), like this mock up:

Thank you so much in advance for any help!!

[CodingFifty]

Hi @nic126,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.product-card__info .product-title {
     text-decoration: underline;
    text-decoration-style: solid; /* Default underline */
    text-decoration-thickness: 2px;
    font-weight: bold;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}

.product-card__info .product-title:hover {
    text-decoration-style: wavy; /* Wavy underline on hover */
    text-decoration-color: red; /* Red wavy underline */
    text-decoration-thickness: 2px; /* Thickness of the underline */
   
}

[nic126]

Thanks! Do you know how I might add a png file as the underline instead?

Do you know how to achieve the highlight effect I mentioned in the navigation?

Thanks again!

[CodingFifty · Accepted solution]

@nic126 ,

Yes! You can achieve an underline effect using a PNG image by applying background-image with linear-gradient to create an underline effect. Here’s how you can do it:

Using a PNG as an Underline

Instead of text-decoration, use background-image with background-position to place the PNG under the text:

.product-card__info .product-title { display: inline; background-image: url('your-underline.png'); background-repeat: no-repeat; background-position: bottom; background-size: contain; /* Adjust to fit the text */ padding-bottom: 5px; /* Space for the underline */ }

If the underline is too short or too long, you can adjust background-size and padding-bottom as needed.

[nic126]

Ahhhh this worked!!! THANK YOU THANK YOU.

When it comes to the png stretching – is there a way to stop that from happening or do I simply need to shorten my product names? It looks perfect under 'Holly Top' but the others are wonky.