This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Reply To: Changing menu mouseover image

Jason Bobich

Hello David,

Remember that you shouldn’t be making any edits inside of the theme, or you’re going to lose them next time you update the theme. Also, in this case you can’t easily reference by to the original image you changed to see where you went wrong because it no longer exists. In your custom.css you should be calling your new images there with your overriding CSS and the new images placed in your child theme.

You may want to consider using Google Chrome’s inspector, opposed to Firebug. It has a feature that makes sorting out the hover of an item a lot easier. — See screenshot:

The theme uses a single image for the background of the menu, which comes out to be 54px in height. This image is 108px in height (double the height of the menu). Then, when an item is hovered over, it applies that same image to the anchor tag, but then re-positions it -54px (half way) down the y-axis. — People often refer to this method of applying a CSS background as a “sprite” if you want to do more research.

So, when you edited the image, you may not have taken this into account. In a nutshell, the top 54px of the image is the menu’s appearance, while the bottom 54px is the hover state.

How to target the hovered anchor directly:

.style_dark_purple .menu_style_classic #access li a:hover { ... }

Your modified image is 144px in height with the hover state happening 72px down.

.style_dark_purple .menu_style_classic #access li a:hover { background-position: 0 -72px; }