Jump to content

Squiggle underline on hover for menu items

Recommended Posts

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

Link to comment
  • Replies 14
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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

Link to comment
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;
}

image.png.844aa845fdd906743cc829910666b44f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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