Adding Menu Hover Animation not working

Hi there,

try this CSS as your menu items are being output as page-items not menu-items:

@media (min-width: 769px) {
  .main-navigation .menu > li > a::after {
      content: "";
      position: absolute;
      right: 0;
      left: 50%;
      bottom: 15px;
      -webkit-transform: translate3d(-50%,0,0);
      transform: translate3d(-50%,0,0);

      display: block;
      width: 0;
      height: 2px;

      background-color: currentColor;
      transition: 0.3s width ease;
  }
  .main-navigation .menu > li.current-menu-item > a::after,
  .main-navigation .menu > li.current-menu-ancestor > a::after,
  .main-navigation .menu > li > a:hover::after {
      width: 50%;
  }
}

Perfect, thank you VERY MUCH!

You're welcome