- This topic has 13 replies, 3 voices, and was last updated 1 year, 10 months ago by Fernando.
-
AuthorPosts
-
May 20, 2022 at 1:05 am #2226266Radek
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.
May 20, 2022 at 3:05 am #2226389DavidStaffCustomer SupportHi there,
Do you have an example of the animation you require ?
May 20, 2022 at 3:34 am #2226421RadekHi David, something like here: https://codepen.io/quinny88/pen/XBvzVd
but no border and no link color change, only background color…May 20, 2022 at 4:01 am #2226460DavidStaffCustomer SupportYou 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 ).May 20, 2022 at 4:42 am #2226502RadekI’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…
May 20, 2022 at 5:33 am #2226552DavidStaffCustomer SupportCan you share a link to where i can see this ?
May 22, 2022 at 11:45 pm #2229092RadekSorry, it’s only on local, sending short video instead…
May 23, 2022 at 12:18 am #2229122Fernando Customer SupportHi 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. π
May 23, 2022 at 12:29 am #2229136RadekNo 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
May 23, 2022 at 12:36 am #2229139Fernando Customer SupportI 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. π
May 23, 2022 at 12:39 am #2229144RadekYes, this is a workaround. Question was “with respect to colors set at GP Color management”… π
May 23, 2022 at 12:50 am #2229149Fernando Customer SupportThe 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. π
May 23, 2022 at 2:10 am #2229224RadekAbsolutely, works perfect π
Thanx a lot.May 23, 2022 at 5:03 pm #2230147Fernando Customer SupportYouβre welcome Radek! Glad to be of assistance! π
-
AuthorPosts
- You must be logged in to reply to this topic.