Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   Hover image shows only on "Home" page (http://forum.bytesforall.com/showthread.php?t=15724)

KylaKreates Oct 21, 2011 07:13 AM

Hover image shows only on "Home" page
 
I hate to ask this because I could swear that I came across this once before I had the problem but now I can't find it again. Please know that I do search the forum before posting and have gotten so much valuable info from it!! My problem is the image I use for hover on the %pages-center menu bar only shows when you are on the home page. I would like for it to show from any location. Is there a way to make that happen? The link is http://www.homeschoolshare.com/blog. While I'm at it here, any idea what I've done that causes the menu items to jump on hover? Thank you so much for all you guys do!

juggledad Oct 21, 2011 07:27 AM

How did you add the smile?

KylaKreates Oct 21, 2011 11:08 AM

I used:
.home li a:hover {
background: url("http://www.homeschoolshare.com/blog/wp-content/uploads/smile_hover.png") no-repeat scroll left!important;
}
Initially we were doing a different image and I needed to add different ones to the different items so I assigned classes. I tried a million codes that I learned from the forum and the only one I could ever get to work was the one above. Initially it was just supposed to be for the "home" class but it worked for all of them. I was afraid to change anything!!

the other code I have in regard to the menu is:
#menu1 li.menu-item a:hover {
padding: 0px 10px 10px 20px;
}
div#menu1 { border: none 0px; }
/* Menu Bar */
div#menu1 ul.rMenu {
background: #fffffe;
height: 40px;
padding: 0px 10px 40px 40px;
}

juggledad Oct 21, 2011 11:21 AM

HTML Code:

.home li a:hover {
background: url("http://www.homeschoolshare.com/blog/wp-content/uploads/smile_hover.png") no-repeat scroll left!important;
}

in english says "when you hover on a link that is part of a list in an HTML element with a class of 'home' use this background.

the only element that gets a class of 'home' is the <body...> element and it is only assigned when you are on the home page. So when you go to another page, the CSS Selector (.home li a:hover) doesn't match anything so the background rule is not applied

KylaKreates Oct 21, 2011 11:29 AM

Well, now that makes perfect sense! Could you help me re-write it please? Did you see it jump around all over the place?

KylaKreates Oct 21, 2011 05:56 PM

I just figured it out! I should have used:

div#menu1 li a:hover {
background: url("http://www.homeschoolshare.com/blog/wp-content/uploads/smile_hover.png") no-repeat scroll left!important;
}

Thanks for all of your help!


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

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