marysmeaton

one more time:
https://www.maryware.ca/home

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('https://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('https://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('https://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

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!

Brilliant!! Thank you WPyogi that did the trick.

thank you so much for your help.

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!

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:
https://www.expand2web.com/blog/how-i-added-social-media-icons-to-the-navigation-menu-of-the-smallbiz-theme/

My site is:
https://www.maryware.ca/wp

Thanks!

OMG! Thank you thank you thank you!
Can’t believe that it was something so simple after copy and editing code forever!!!

I’ll definitely mark this as resolved!