X 5.1 Icon Stack Nav Menu Hover Effect

Support
#1

Is it possible to change the background color on the icon stack top menu navigation upon hover? Here is the site: http://petrosky.temp-website.us/

The client would like the background color of the oval that appears when hovering on the desktop nav menu to be light gray with dark blue text (in other words it looks like a reversed out button upon hover). Is that possible since they aren’t technically buttons?

Everything is updated…

Thanks!
Dawn

#2

Hey,

To have sure about your question, do you want to change the background hover on the menu items? If yes, just add this custom CSS code:

.x-navbar .desktop .x-nav > li > a:hover > span {
  background-color: blue !important;
}

Just change the blue by your rgb color.

#3

Thanks! That did the trick along with adding a text color for hover. So if anyone is following this, all the CSS was:

/* change background on Icon stack oval hover */

.x-navbar .desktop .x-nav > li > a:hover > span {
background-color: #f1f1f1 !important;
color: #15416c !important;

}

#4

Hi there,

Thank you for sharing the solution with us and your contribution.