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.
http://practical-informatics.webflow.io/
Also I have only applied the interactions to “Services.”
Here is my public share link: https://preview.webflow.com/preview/practical-informatics?preview=f349b03887a6b26ebf707b3777e580da
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.
@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: https://preview.webflow.com/preview/practical-informatics?preview=bcd63d8f34c03765a8100bd90f1d30a0
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%.
I’m definitely getting closer but for some reason mine stack and extend the nav bar below:
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.
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.