mdeb678
(Mayeul)
1
Hello everyone,
I would like to add an animation to my navbar but I don’t manage to make it work properly.
Here is what I want to do :
1/ A red dot appears/disappears on hover
2/ The red dot is displayed when the page is selected.
Many thanks for your help!
Happy Holdiday Season to you all.
Here is my public share link: Webflow - Portfolio Photo
mdeb678
(Mayeul)
2
Hello,
Does anybody has an answer to this problem?
Thanks for your help!
Mayeul
Stan
(justAnotherDeveloper)
3
HI @mdeb678 simplest way you can achieve this effect is custom CSS here is code you should place to project settings -> custom code
.main-nav-link::after{
content:'';
display: inline-block;
opacity: 0;
margin-left:8px;
margin-bottom: 2px;
border-radius: 50%;
width: 8px;
height: 8px;
background: red;
transition: opacity .4s ease-in-out;
}
.main-nav-link:hover::after{
opacity: 1;
}
.main-nav-link.w--current::after{
content:'';
display: inline-block;
opacity: 1;
margin-left: 8px;
margin-bottom: 2px;
border-radius: 50%;
width: 8px;
height: 8px;
background: red;
}
don’t forget to wrap this code in <style> </style>
tag
READ ONLY example
LIVE example