[Resolved] Menu Hover Animation

[Marc Yvan]

Hi,
I have set a menu hover animation via these instructions:
https://docs.generatepress.com/article/adding-menu-hover-animation/

I needed to adjust the hover setting differently for normal and sticky.
I used this solution: https://generatepress.com/forums/topic/sticky-header-with-menu-hover-animation/

Now I can control the hover effect separately, but I have a small issue.

For the sticky to activate I need to scroll down a little bit on the page (The Second time I press the “down” key on the keyboard, it will activate it) but when I press the “down” key only once, the sticky is not activated yet and the hover animation drops way below the menu items.
The sticky transition is set to “None”.

Any ideas how this could be resolved ? Thank you very much

[Elvin]

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.

[Marc Yvan]

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

[Elvin]

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

[Marc Yvan]

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

[Elvin]

No problem. 🙂

[Marc Yvan]

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

[Leo]

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

Can you confirm?

[Marc Yvan]

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

[Ying]

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 🙂

[Marc Yvan]

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

[Ying]

No Problem Marc 🙂

[Author]

Posts