Squiggle underline on hover for menu items

Site URL: https://rust-mustard-yyx2.squarespace.com/

Hi there! I'm trying to make it so there is a little squiggle underneath the menu items on hover. 

Here is a site that does it except with sharper lines (and they don't appear on hover they only appear on click): https://chinacfrost.com/about-1 

I want the squiggle to appear on hover and then stay when clicked but I have no idea how to go about this?

Here is my site: https://rust-mustard-yyx2.squarespace.com/ password: beans

Try adding to Design > Custom CSS

div.header-nav-item>a:hover {
    border-bottom: 1px solid;
}

@tuanphan thank you!!!! that works for the straight line! Is there any way to make it a custom image or a wavy line?

17 hours ago, katierosso said:

@tuanphan thank you!!!! that works for the straight line! Is there any way to make it a custom image or a wavy line?

Hi. Possible both. 

Can you check site url? I don't see navigation now

@tuanphan sorry! try https://rust-mustard-yyx2.squarespace.com/home (no password now!)

On 9/13/2022 at 7:20 AM, katierosso said:

@tuanphan sorry! try https://rust-mustard-yyx2.squarespace.com/home (no password now!)

First, remove code I sent

Next, add this new code. Replace random image with wavy line image

div.header-nav-item>a {
    position: relative;
}
div.header-nav-item>a:hover:after {
    width: 100%;
    transition: all 0.3s;
}
div.header-nav-item>a:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/03/01/09/35/iceland-poppy-7040946__480.jpg);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    transition: all 0.3s;
}

@tuanphan it's not working 😞 It just doesn't show up at all?

I used an Imgur image link to replace the Pixabay one — does it have to be a specific kind of image link? Here is the link I tried to use: https://imgur.com/a/IZVD4Ni

Even when I pasted it in originally it didn't seem to be pulling the Pixabay link, either. Not sure where I went wrong. 

All that shows is a normal underline on the current tab.

Also, domain switched over so you can see the current site at paperhatdesign.com/homepage

10 hours ago, katierosso said:

@tuanphan it's not working 😞 It just doesn't show up at all?

I used an Imgur image link to replace the Pixabay one — does it have to be a specific kind of image link? Here is the link I tried to use: https://imgur.com/a/IZVD4Ni

Even when I pasted it in originally it didn't seem to be pulling the Pixabay link, either. Not sure where I went wrong. 

All that shows is a normal underline on the current tab.

Also, domain switched over so you can see the current site at paperhatdesign.com/homepage

Maybe height is too low. You can try this new code

div.header-nav-item>a {
    position: relative;
}
div.header-nav-item>a:hover:after {
    width: 100%;
    transition: all 0.3s;
}
div.header-nav-item>a:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/03/01/09/35/iceland-poppy-7040946__480.jpg);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 10px;
    transition: all 0.3s;
    background-size: cover;
    background-position: center center;
}

@tuanphan thank you! the pixabay photo you linked of the poppy shows up (yay!) but I can't get my own photo to show up. Pixabay won't let me upload it and the imgur link isn't working. Do you know where I can upload it/how big it should be?

18 hours ago, katierosso said:

@tuanphan thank you! the pixabay photo you linked of the poppy shows up (yay!) but I can't get my own photo to show up. Pixabay won't let me upload it and the imgur link isn't working. Do you know where I can upload it/how big it should be?

Upload image to your Squarespace site: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Suppose your file name is: katier.png

When you uploaded, it will have url: https://rust-mustard-yyx2.squarespace.com/s/katier.png

@tuanphan it worked!!!!!! you're an angel!!! One more question: when the menu item is selected, there is an underline under the page name. Is there any way I can change that to a squiggle line as well?

On 9/23/2022 at 12:21 AM, katierosso said:

@tuanphan it worked!!!!!! you're an angel!!! One more question: when the menu item is selected, there is an underline under the page name. Is there any way I can change that to a squiggle line as well?

Try this new code

div.header-nav-item>a {
    position: relative;
}
div.header-nav-item--active>a {
    background-image: none !important;
}
div.header-nav-item>a:hover:after, div.header-nav-item--active>a:after {
    width: 100%;
    transition: all 0.3s;
}
div.header-nav-item>a:after, div.header-nav-item--active>a:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/62dae308dd082709a049215b/t/632c989af5a80718933784b6/1663867048606/underline.png);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 10px;
    transition: all 0.3s;
    background-size: cover;
    background-position: center center;
}

@tuanphan it works! only thing is when it loads, it loads with the standard underline and then snaps back to the wave. Is there any way to make it load up with the wave?

17 hours ago, katierosso said:

@tuanphan it works! only thing is when it loads, it loads with the standard underline and then snaps back to the wave. Is there any way to make it load up with the wave?

You try checking image size & compress it

@tuanphan that worked!!!!!! thank you so much!