Menu Hover Animation

Hi,

This issue has something to do with the toggling between menu item's bottom property and it's child anchor tag's line-height.

That said, try this CSS:

/*** #START# MENU HOVER ANIMATION ***/@media (min-width: 769px) {
  .main-navigation .menu > .menu-item:after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 31px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px;
    background-color: inherit;
    transition: 0.3s width ease;
  }

  .main-navigation .menu > .menu-item.current-menu-item:after, .main-navigation .menu > .menu-item.current-menu-ancestor :after, .main-navigation .menu > .menu-item hover::after {
    width: 50%;
  }
} /*** #END# MENU HOVER ANIMATION ***/ 

/*** #START# MENU HOVER ANIMATION HEIGHT ADJUSTEMENT WHEN NOT STICKY ***/@media (min-width: 769px) {
  .main-navigation:not(.navigation-stick) .menu>.menu-item>a:after {
    bottom: 31px;
  }
}/*** #STOP# MENU HOVER ANIMATION HEIGHT ADJUSTEMENT WHEN NOT STICKY ***/

/*** #START# BIGGEST LOGO ON FRONT PAGE ***/@media (min-width: 769px) {
  .home #site-navigation .navigation-branding img {
    position: absolute;
    left: 0px;
    top: -17px;
    height: 110px;
  }
} /*** #END# BIGGEST LOGO ON FRONT PAGE ***/ 
/*** #START# BIGGER LOGO ON STICKY NAVIGATION ***/@media (max-width: 1024px) and (min-width: 769px), (min-width: 1025px) {
  .main-navigation.sticky-navigation-transition .navigation-branding img {
    position: absolute;
    left: 0px;
    top: -9px;
    height: 80px;
  }
} /*** #END# BIGGER LOGO ON STICKY NAVIGATION ***/ 
/*** #START# BIGGER LOGO ON MOBILE HEADER ***/@media (max-width: 769px) {
  .home #site-navigation .navigation-branding img {
    position: absolute;
    top: -12px;
    height: 82px;
  }
}/*** #STOP# BIGGER LOGO ON MOBILE HEADER ***/
/*** #START# NO CART ON MOBILE HEADER ***/@media (max-width: 769px) {
  .mobile-bar-items.wc-mobile-cart-items:not(.has-items), .main-navigation .wc-menu-item:not(.has-items) {
    display: none;
  }
}/*** #STOP# NO CART ON MOBILE HEADER ***/

.main-navigation.sticky-navigation-transition .main-nav > ul > li > a {
line-height: 91px;
}

You can then try to adjust the CSS related to your Logo.

Hi Elvin,
I tried the code you provided but now the hover is on top of the menu items when I scroll down and the sticky is activated. This was my issue when I first used the menu hover animation.
Thank you

Ah right. My css was meant for a header that doesn't resize on sticky mode.

If you want the resizing version, revert to your initial CSS and add this instead:

.sticky-navigation-transition .menu > .menu-item::after {
    bottom: 16px;
}

And change your transition: 0.3s width ease; to transition: 0.3s all ease; so everything is smooth.

Here's how it would behave if implemented properly.
https://share.getcloudapp.com/yAuZ98jk

This resolved my issue. Thank you for your time and help !

No problem. :)

Hi,
I closed this ticket, but I had not noticed I was missing an effect with the menu hover.

Now everything looks good except I only see the menu underline for the current page. When I hover over the menu items, it will not underline them. How could I fix this ? Thank you

The link to your site isn't working for me.

Can you confirm?

Hi leo,
The website is working fine on my end. Do you still have the issue ?
Thank you

Hi Marc,

There is missing a : before the hoverin the code. Replace this part of your code
.main-navigation .menu > .menu-item.current-menu-item:after, .main-navigation .menu > .menu-item.current-menu-ancestor :after, .main-navigation .menu > .menu-item hover::after
with below CSS:
.main-navigation .menu > .menu-item.current-menu-item:after, .main-navigation .menu > .menu-item.current-menu-ancestor :after, .main-navigation .menu > .menu-item:hover::after

Let me know :)

Hi Ying,
Yes, once again this resolved my issue ! : )
Thank you very much

No Problem Marc :)