Main menu background color bottom/top animation hover effect

Hi there,

Do you have an example of the animation you require ?

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

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 ).

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...

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

Sorry, it's only on local, sending short video instead...

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. :)

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

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. :)

Yes, this is a workaround. Question was "with respect to colors set at GP Color management"... :)

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. :)

Absolutely, works perfect ;)
Thanx a lot.

You’re welcome Radek! Glad to be of assistance! :)