Navigation Menu custom images question

[yoatiba 0]

Hi there, im trying to customize my main navigation menu with seperate images which I made to take the place of standard text. I've got the images and links to work, but i do not know the code to resize. See http://www.yoatiba.com I need no space around the images themselves. Also, when HOVER, it highlights the back white. Question - How do I change it to where I can replace the picture with a 2nd (highlighted) picture? And remove the highlight feature that is currently on the image? Thanks, Chris

[yoatiba 0]

right now i've got this in the style.css, which clearly isnt working, but where i started from #menu-item-148{width:180px; height:122px; background:none; border:0px; margin-top:0px; overflow:hidden; float:left;} #menu-item-149{width:197px;} #menu-item-150{width:197px;} #menu-item-152{width:197px;} #menu-item-151{width:197px;}

[yoatiba 0]

UPDATE: i've got them how i wanted with this code, #menu-item-148{width:203px; height:122px; border-top: none; border-bottom: none; border-left: none; border-right: none; } HOW do i edit the hover capabilities, however? Can I use a different picture entirely when highlighted or on that page? If not, how do I disable the current highlight that messes it up? Thanks!

[Danny+ 1,327]

Hi, To remove the background color when in a hover state, add this to your Custom Code: [code] .main_nav .main-nav li a:hover { background: transparent; } [/code] Now if you would like to use a different image when hovering over the menu item, you will need to change the way you have done your menu. From what I can see and I could be wrong, it looks as if you have added the image src HTML after the URL for the menu item. If that is the case, as far as I'm aware you will have no power over the hover state when it's been set up like this. You could try this plugin, I found when doing a search for you but I have no experience with this plugin but it states that it adds basic CSS so you can work with the images. http://wordpress.org/extend/plugins/custom-menu-images/ If that plugin isn't the answer then there is another method, but will come to that if the plugin isnt the answer.

[yoatiba 0]

thanks danny, that worked great. i may just stick with a non-changing menu. one problem i'm having now - whenever i'm on a certain page, Contact, for example, the menu wants to CONTINUALLY HIGHLIGHT that button to indicate the viewer is currently on that page. How do I disable that as well? thanks

[Danny+ 1,327]

Hi, Add this, it should resolve the issue: [code] .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a { background: transparent !important; } [/code]