Hover for navigation links and blog button

Site URL: https://synthesizer-parakeet-hgtp.squarespace.com/config/pages/6087a48292661251f888ffc2

Hi guys!

I was wondering if anyone could help me with this hover effect for the navigation links. I leave you here the XD link to see how it is supposed to work for the links and the blog button. As you can see the most I've obtained so far in my website is a stretchy line for the links, but it is not exactly what I wanted...Any suggestions?

For the XD file I had to put a white rectangle behind the links and a line that stretches starting from the center behind the white rectangle. I don't know if it is possible to do something similar coding. 

I'd appreciate any suggestion from you guys

Thank you 

Here is the link to the XD project for the homepage, so you can see the hover animation by yourself:

https://xd.adobe.com/view/215965fe-70a2-4b0f-9dc8-bcef125bffcd-740a/

Your site is private. Can you setup password?

On 5/6/2021 at 5:07 PM, tuanphan said:

Your site is private. Can you setup password?

https://heptagon-goose-j4bm.squarespace.com/config/

try with: goose4

let me know if it works

thank you 🙂 

20 hours ago, erikaa said:

https://heptagon-goose-j4bm.squarespace.com/config/

try with: goose4

let me know if it works

thank you 🙂 

Add to Design > Custom CSS

/* nav items hover */
.header-nav-item a {
    position: relative;
}
.header-nav-item a:before, .header-nav-item a:after {
    content: "";
    display: block;
    position: absolute;
    background: black;
    height: 1px;
    top: 6px;
    left: -10px;
    width: 10px;
    opacity: 0;
    transition: all 0.3s;
}
.header-nav-item a:after {
    left: unset !important;
    right: -10px;
}
.header-nav-item a:hover:after, .header-nav-item a:hover:before {
    opacity: 1;
}

Hi! I have a similar query about hover on my navigation bar. I'm trying to get a handwritten circle effect but I can't get it to work.

I made a prototype in Adobe XD: Adobe XD Prototype

I've already tried adding this code to my site but that didn't work: Hand Drawn Circle Snippet

Any help would be much appreciated! Thanks!

On 5/15/2021 at 12:23 AM, scopland said:

Hi! I have a similar query about hover on my navigation bar. I'm trying to get a handwritten circle effect but I can't get it to work.

I made a prototype in Adobe XD: Adobe XD Prototype

I've already tried adding this code to my site but that didn't work: Hand Drawn Circle Snippet

Any help would be much appreciated! Thanks!

I think you can create a gif file, then we will give the code: when hover, gif will appear as background