Streaming live at 10am (PST)

How to Create This Nav Link Hover Effect?

I am trying to create a hover effect for my nav links like the one with the red background here:

I got pretty far but I am having an issue where if you hover just above the word, the interactions spazz out.


Also I have only applied the interactions to “Services.”

Here is my public share link:

So, how I would pull off this effect would be to create a div with overflow: hidden and have both links in the div. You then set the interaction on the div wrapper to affect only the nested elements, and have both move up 100% on hover and move back to origin on hover out.

31 AM

18 AM

Hover Effect

@bbrazis Thank you for the response! If I set them BOTH to move up 100%, wouldn’t that just move them both out of view? Is there an initial appearance for one or the other or any settings on the link-btn-1 or -2 that I need to think about? Haven’t gotten it quite right yet.

Updated preview:

on the link-wrapper try setting position:relative and making sure that both links are stacked on top of each other in the link-wrapper. Once they are stacked properly then you will see the desired effect, I hope. Also, try setting both links to have a width and height of 100%.

11 AM

I’m definitely getting closer but for some reason mine stack and extend the nav bar below:

32 PM

I updated my link with the new code.

set the link-wrapper's height to 60px and it should look good.

Yes! You’re a genius, thank you for your help! This has been solved.

1 Like

Glad I could help you create this effect!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.