Hi,
So i've been tearing my hair out over an issue im having with my page menus. I wanted to remove the down arrow for the drop-down page menu items, and used the solution I found here to convert them into a 1x1 transparent gif, and was then left with the space where the arrow had been. I tried various solutions that I found on this forum, but for some reason none seem to work for me.

My Site is: http://dear-esther.com/

As you can see all of the menu items with dropdown options have too much right padding. Can someone advise me how to fix this, and/or where im going wrong?

Most of the unsuccessful solutions I've tried were similar to this: http://forum.bytesforall.com/showthr...ighlight=arrow


Thanks
Rob

You could try flicking Larry or Juggledad a $20, that might fix it

Because of the way the menu is coded I see these options.

• Modify one of the theme files (not sure which one as I never modify theme files because an update to the theme will wipe out changes
• Use a menu plugin
• Use the following code in the CSS Inserts box. This should put even spacing on either side of you dropdown menu items but you may want to also increase your side padding on non dropdowns so the menus all look the same.

div#menu1 ul.rMenu-hor li.rMenu-expand a {
    background-image: none !important;
    padding: 3px 7px 3px 14px !important;
}

My choice would be to look for a menu plugin or live with the arrows. BTW... why don't you like the arrows this will show people there is more to the menus.

Thanks for the suggestion but unfortunately it still didn't remove that pesky space. I cant understand what's causing it, I'm sure I've removed these gaps with a html insert before, but since updating to the latest atahualpa it doesn't seem to work any longer

I guess if all else fails I'll have to put the arrows back, but I kind of like the simplicity of the menu at the moment, minus arrows.

If you look at css.php at around line 2555 you will see the following

/* divs added for "IE6 & 2 menu styles" */	

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	padding-left: 5px;	/* reset padding */
	padding-right: 15px !important;
	background-position: 100% 50%;
	background-image: url(<?php echo $templateURI; ?>/images/expand-down<?php echo ($bfa_ata['page_menu_arrows'] == "white" ? "-white" : ""); ?>.gif);
	}

If you remove the !important from padding-right you should be able to adjust the padding as you wish. Just remember if you upgrade the theme you will have to redo this edit. I have only tested this very quickly so don't know what other issues this may cause.

you should be able to put the same CSS in the CSS Inserts and it will take precedence since it is the same selector and comes last.

Ok so i tried clearing my browser cache and trying this:

div#menu1 ul.rMenu-hor li.rMenu-expand a {
padding-right: 5px !important;
}

And it now works! :D must have been the cache or my formatting or something odd.

Anyway, big donation coming soon! Cheers!