[Resolved] Menu Hover Animation

Home Forums Support [Resolved] Menu Hover Animation

Home Forums Support Menu Hover Animation

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1595972
    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

    #1596317
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1597304
    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

    #1597591
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #1598386
    Marc Yvan

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

    #1598978
    Elvin
    Staff
    Customer Support

    No problem. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1620608
    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

    #1620742
    Leo
    Staff
    Customer Support

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

    Can you confirm?

    #1620772
    Marc Yvan

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

    #1620818
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1628122
    Marc Yvan

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

    #1628240
    Ying
    Staff
    Customer Support

    No Problem Marc πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.