[SOLVED] Differing hover images for each menu item using CSS classes
OK, I know this has been discussed at length already but I am pulling my hair out trying to go this right!
So far, using the WP menu builder I have managed to get my menu items to show up as texted images by using HTML in the "Navigation label" box for each menu item. I have also given each menu item it's own CSS class in order for me to get a custom hover image to display on the menu items. Here's where I am stuck. I cannot get a the menu item to do anything on hover no matter what CSS insert I add.. All the explanations so far around this have explained in detail up to this point but not exactly what CSS to add to style the individual menu items by their individual classes. Please would someone be so kind as to have a look at my site and give me a pointer or two. http://incubit.co.za/wp-login.php Username: temp Password: temp99 Thanks in advance! |
I would probably use add a class for the menu item and use CSS to add a background image for regular and hover states. To add a class you may have to turn that function on in "Screen Options" for the menu.
|
Larry,
Thanks, but I did read the multiple poets where you kindly mentioned that. I have assigned classes for each of the two items "mitem1" and mitem2" but I can't seem to get them to respond to any CSS I try to manupulate them with. I'm not sure how the CSS should be structured. I tried: Code:
.mitem1 li a:hover {background: ) |
Here is what I might try.
First of all I added this to remove the image HTML Code:
.mitem1 img, .mitem2 img { HTML Code:
.mitem1,.mitem2 { |
Damn thank you, you're a genius!! The solution was so simple in the end. The problem seems to have been that one cannot use the method where you place an image with HTML into the "Navigation Label" and still be able to use differing hover background images. I realized now that the image is in front of any background image one assigns. Learn something new every day.
Using the custom CSS Classes to style the items really is as straight forward as I had initially thought. Once again, thanks Larry.. |
Oops the hover works with this arrangement but not the links. To use this for hover with links I would add a div to the navigation and use CSS for the regular and hovered states. Here is some code that might point you in the right direction. First take out the image code for the navigation and replace with something like the following (This is for the first menu item)
HTML Code:
<div id="mwrapper1" class="mwrapper"><div id="mitem1">Home</div></div> HTML Code:
.menu-item a { |
All times are GMT -6. The time now is 05:40 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.