I got this problem with my sub-menu items - the white space where the background-image is not applied. I _could_ fix this by applying the background to ul.children, but that is also used for the comments section, causing trouble there. How can I fix this?



URL is http://www.urgeschmack.de

go look for a fix in the 'New Versions' forum

Thank you very much.

I applied that fix but the situation did not change. What else could I do to fix this?

Make sure you don't have any caching plugins active or it will take time for the fix to how up
Set your CSS to internet so I can take a peek

No Caching plugins, CSS Debugging set to 'yes', double-checked my CSS inserts to not make a fool out of myself once again (but probably will...)

look in your CSS Inserts for the following

ul.rMenu li {
margin:0px 22px;
color:#eee !important;
font-weight:bold;
background:url(/wp-content/uploads/ug_pagemenu_buttonBG.png) repeat-x top left
}

and change the margin:0px 22px; to padding:0px 12px;

Thank you, that fixed it - but introduced a new problem. By using padding instead of margins, the buttons have become wider and there seems to be a difference in hovering over the button versus hovering over the text link in the button, each changing to a different color while hovering.

To fix this as well, I changed the setting back to "margin" and just added:

li.page-item-1041 {
padding:0px 22px;
margin: 0px 0px !important;
}

for that specific sub-menu item.

The main problem seems to be to override the background-color settings from the Ata "Page Menu Bar" styling-set. It seems to make sense to either write a short how-to/faq on how to change the page menu bar to a image based bar with changing graphics for hover etc. OR to add options to use images straight on the "Page Menu Bar" settings page.

For example, to get the menu bar to work like this http://www.urgeschmack.de (and one main issue was the button spacing because the Ata standard-spacing just did not look good)m I had to use this code:

div#menu1 {
border: none;
background: url(/buttonBG.png) repeat-x top left;
}
div#menu1 ul.rMenu {
background: url(/buttonBG.png) repeat-x top left;
}

ul.rMenu li {
margin: 0px 22px;
color: #eee !important;
font-weight:bold;
background: url(/buttonBG.png) repeat-x top left;
}
li.page-item-1041 {
padding:0px 22px;
margin: 0px 0px !important;
}

ul.rMenu li a:hover,
.page-item a:hover {
text-decoration:underline;
color: #fff !important;
background: url(/buttonBG_hover.png) repeat-x top left;
}

So another good option might be to add "Page menu bar item width" or something similar.