Navbar animation w/ red dot appears/disappears

[mdeb678 (Mayeul)]

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)]

Hello,

Does anybody has an answer to this problem?

Thanks for your help!
Mayeul

[Stan]

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