Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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:


Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0
20 hours ago, erikaa said:


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;


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

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