Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.
sorry – clearly I’m so new that I don’t even know how to post a link in a question.
The tutorial I followed is:
http://www.expand2web.com/blog/how-i-added-social-media-icons-to-the-navigation-menu-of-the-smallbiz-theme/
My site is:
http://www.maryware.ca/wp
Thanks!
Sorry esmi, but that’s WAY beyond my scope. I don’t how to use these or how to search for answers on a css troubleshooting development tool.
I apologize, but I am a complete newbie and was hoping to find an answer that spelled things out a basically as possible.
I’d still love to find a way to get rid of the hover for these icons without having to remove the hover for the whole menu.
Thanks!
Try adding this to the bottom of your child theme style.css file:
#access li#menu-item-282:hover > a,
#access li#menu-item-283:hover > a,
#access li#menu-item-284:hover > a {
background: none repeat scroll 0 0 transparent;
}
As the guy above said, you need to find the html element that has the hover effect (to do this firebug is a good option) and in your stylesheet use :hover to target it when someone is hovering. FYI for others, I recently found out you can select “hover” from the style dropdown in firebug to target that state – awesome! It seems to be this one.
#access li:hover > a, #access ul ul *:hover > a {
background: none repeat scroll 0 0 #83AFC7;
color: #FFFFFF;
}
background: none !important; is what I think you want.
Brilliant!! Thank you WPyogi that did the trick.
thank you so much for your help.
Sorry WPyogi – I moved my site files over today, and for some reason, the code isn’t working any more.
I’m guessing perhaps that the menu item numbers aren’t the same anymore?
Is there a way for me to identify the menu item number without having a css tool like firebug?
Any help – AGAIN – is very much appreciated.
Thanks!
Why aren’t you using Firebug? http://getfirebug.com Or use Chrome Developers Tools – does the same basic stuff. There’s really no way to do web work without learning how to use these tools :).
But the menu numbers are not the problem – they are the same – what did you change or move?
The whole thing was exported, then reloaded into the root directory of my server.
The piece of code is the same, but I had to copy it back into the file as it got lost in the transfer.
I had to reload the images, so then had to change the image file urls in the code (with your part added on).
Here's the code again:
.menu-etsy {
text-indent: -9999px;
background-image: url('http://maryware.ca/wp-content/uploads/2013/10/etsy-1-e1380728242655.png') !important;
background-repeat: no-repeat !important;
margin-left: 200px !important;
width: 30px;
}
.menu-pinterest {
text-indent: -9999px;
background-image: url('http://maryware.ca/wp-content/uploads/2013/10/pinterest-1-e1380728315552.png') !important;
background-repeat: no-repeat !important;
margin-left: 15px !important;
width: 30px;
}
.menu-email {
text-indent: -9999px;
background-image: url('http://maryware.ca/wp-content/uploads/2013/10/email-1-e1380728369390.png') !important;
background-repeat: no-repeat !important;
margin-left: 15px !important;
width: 30px;
}
#access li#menu-item-282:hover > a,
#access li#menu-item-283:hover > a,
#access li#menu-item-284:hover > a {
background: none repeat scroll 0 0 transparent;
}
here’s the link to the page:
I’ll start looking into Chrome’s Developer tools too – I swear!
Thanks
What’s the current site? Maybe I’m looking at the old one linked above?
It actually seems to be working fine for me – try clearing your browser cache.
