Two line menu attribute.

I had the same problem, both with multi-line button labels and responsive sites that don’t always preserve the menu width correctly. The problem is that the button backgrounds for the normal and hover states are both part of a single image that is shifted up and down based on the button state. The fix requires a few things to be changed, there need to be two separate background images and the css needs to be changed to accommodate two images, to stop moving the image based on button state, and to change the fill method set for the button background.

I’ll zip up the skin css with grey versions of the images and you can just fill the images with whatever color you like and drop them all in the skins directory. I’ll try to find them a long term storage place and provide a link so others can stop the madness in the future. It’s not a difficult fix but why make everyone re-invent the wheel to make their menus work ??

As promised, here is the zip file containing the css and images to put in your skins folder.

skins.zip

I used the white background so you can fill it with whatever color you like.

I haven’t tried it with fly out sub menus but I would think it should behave the same as the default styles. If not, I’m sure it wouldn’t be that hard to adjust the alignment.

You will notice that the top shadow in the hover state is fatter than normal, that’s due to the background being stretched to fill the larger button. I’m not bothered by it and I haven’t had any clients notice it yet, so I don’t think it’s a problem.

What do you want for nothing ??

You just saved a life. Had the same problem with the plugin and this worked perfectly.

Cheers bubbastien, saved a life here as well, keep up the good work.
Much appreciated.