Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Differing hover images for each menu item using CSS classes


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jan 13, 2013, 06:29 AM
Find IT Services's Avatar
Find IT Services
 
11 posts · Aug 2012
Klerksdorp, South Africa
Send a message via Skype™ to Find IT Services
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!
  #2  
Old Jan 13, 2013, 12:30 PM
lmilesw's Avatar
lmilesw
 
10,077 posts · Jul 2009
Central New York State USA
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 (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jan 13, 2013, 02:12 PM
Find IT Services's Avatar
Find IT Services
 
11 posts · Aug 2012
Klerksdorp, South Africa
Send a message via Skype™ to Find IT Services
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: )
and many other things to no avail..
  #4  
Old Jan 13, 2013, 05:36 PM
lmilesw's Avatar
lmilesw
 
10,077 posts · Jul 2009
Central New York State USA
Here is what I might try.
First of all I added this to remove the image
HTML Code:
.mitem1 img, .mitem2 img {
    display: none;
}
Then I would add something like the following to add a background image and a hover for the background image
HTML Code:
.mitem1,.mitem2 {
    width: 210px !important;
    background: red !important;
    height: 30px;
}
.mitem1:hover, .mitem2:hover {
    background: blue !important;
}
The red and blue are just placeholders. You would of course replace with the path to your background image. You will of course have to add more selectors if you add more menu items.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Jan 14, 2013, 10:33 AM
Find IT Services's Avatar
Find IT Services
 
11 posts · Aug 2012
Klerksdorp, South Africa
Send a message via Skype™ to Find IT Services
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..
  #6  
Old Jan 14, 2013, 02:47 PM
lmilesw's Avatar
lmilesw
 
10,077 posts · Jul 2009
Central New York State USA
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>
Then use the following CSS code or something like it.

HTML Code:
.menu-item a {
    padding: 0 !important;
}
#mwrapper1 {
    background: path to non-hovered image;
    padding: 0;
}
#mwrapper1:hover {
    background: path to image;
    padding: 0;
}
.mwrapper {
    width: 120px;
    height: 40px;
}
#mitem1 {
    display: none;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by lmilesw; Jan 14, 2013 at 11:22 PM.

Bookmarks

Tags
menu class

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] IMAGE STYLING: Hover Over Effect to All Linked Images americansuburbx Atahualpa 3 Wordpress theme 5 Dec 5, 2012 01:26 AM
[SOLVED] Atahualpa 3.6.4 Page Menu Item Hover bground [color] 1px off from Current xuanlana Forum How-To 2 Jan 12, 2012 06:55 PM
different hover over for each page item fullmetalgirl Page & Category Menu Bars 5 Sep 23, 2011 10:35 AM
[SOLVED] Classes added to style.css seem to be ignored kostermw Header configuration & styling 4 Oct 6, 2009 10:20 AM
Customizing category menu bar with different images for every item GeoParadise Page & Category Menu Bars 5 Apr 17, 2009 05:50 PM


All times are GMT -6. The time now is 10:20 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.