- This topic has 13 replies, 3 voices, and was last updated 4 years ago by
.
-
Posts
-
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.
Customer Support
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
--accentfor the color name in your GP colors.
In the second rule the-60pxhas 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…
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. 🙂
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)withvar(—-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! 🙂
- You must be logged in to reply to this topic.
