[Support request] Main menu background color bottom/top animation hover effect

Home Forums Support [Support request] Main menu background color bottom/top animation hover effect

Home Forums Support Main menu background color bottom/top animation hover effect

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2226266
    Radek

    Hi, can You please provide me with right CSS code to animate background color on hover on main menu items (works at menu + sticky menu too) with respect to colors set at GP Global colors ? I need bottom to top animation on hover. Thanx a lot.

    #2226389
    David
    Staff
    Customer Support

    Hi there,

    Do you have an example of the animation you require ?

    #2226421
    Radek

    Hi David, something like here: https://codepen.io/quinny88/pen/XBvzVd
    but no border and no link color change, only background color…

    #2226460
    David
    Staff
    Customer Support

    You could do:

    .main-navigation .main-nav ul li a {
        box-shadow: inset 0px 0px 0px 0px var(--accent);
        transition: box-shadow 0.3s ease-in;
    }
    .main-navigation .main-nav ul li:hover a {
        box-shadow: inset 0px -60px 0px 0px var(--accent);
    }

    You need to change --accent for the color name in your GP colors.
    In the second rule the -60px has to be the negative value of your Menu Item Height ( in Customizer > Layout > Primary Navigation ).

    #2226502
    Radek

    I’v got hover and active color on bg menu item set to var(–base), if a change for this, on hover there is no animation, bg color change immediately, animation works on mouse out only…

    #2226552
    David
    Staff
    Customer Support

    Can you share a link to where i can see this ?

    #2229092
    Radek

    Sorry, it’s only on local, sending short video instead…

    #2229122
    Fernando
    Customer Support

    Hi Radek,

    Can you try if modifying the code into something like this works?:

    .main-navigation .main-nav ul li a {
        box-shadow: inset 0px 0px 0px 0px var(--accent);
        transition: box-shadow 0.3s ease-in;
        -webkit-transition: box-shadow 0.3s ease-in;
        -moz-transition: box-shadow 0.3s ease-in;
        -ms-transition: box-shadow 0.3s ease-in;
        -o-transition: box-shadow 0.3s ease-in;
    }
    
    .main-navigation .main-nav ul li:hover a {
        box-shadow: inset 0px -60px 0px 0px var(--accent);
    }

    Kindly let us know how it goes. πŸ™‚

    #2229136
    Radek

    No change. But I found that when I use a color other than the one set as the background color in GP Color manager, the effect works, but the background color (set in GP Color) is forced immediately on hover without waiting… sending another short video

    #2229139
    Fernando
    Customer Support

    I see. You’ll need to set the hover color in Appearance > Customize > Colors > Primary Navigation > Navigation Background to transparent as such: https://share.getcloudapp.com/7Ku6B9DR

    Then, set your preferred hover color for the Navigation Text.

    Kindly let us know how it goes. πŸ™‚

    #2229144
    Radek

    Yes, this is a workaround. Question was “with respect to colors set at GP Color management”… πŸ™‚

    #2229149
    Fernando
    Customer Support

    The hover effect generated by default is different from the one we created through the custom code. The color set in for the Navigation Background in GP colors is for the default hover effect.

    The custom CSS uses a global color called Accent. You may create a new global color as such, and then correspondingly use this new color by replacing var(β€”-accent) with var(β€”-your-new-color-name).

    See: https://share.getcloudapp.com/xQuw42dB

    In my example I named my color hover-menu-color. In turn, my code would be:

    .main-navigation .main-nav ul li a {
        box-shadow: inset 0px 0px 0px 0px var(--hover-menu-color);
        transition: box-shadow 0.3s ease-in;
    }
    .main-navigation .main-nav ul li:hover a {
        box-shadow: inset 0px -60px 0px 0px var(--hover-menu-color);
    }

    Hope this clarifies. πŸ™‚

    #2229224
    Radek

    Absolutely, works perfect πŸ˜‰
    Thanx a lot.

    #2230147
    Fernando
    Customer Support

    You’re welcome Radek! Glad to be of assistance! πŸ™‚

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