display image at menu

[rodya]

Hi!
I’m trying to display some images (social media icons) at the right top of the menu, but i don’t get how to do it…
I have been looking around, and after creating those customs links (for example for Facebook and Twitter) on the menu, I have attached that code to the style.css
but
1- i don’t know where to exactly insert it
2- if the code is right

@media (min-width: 600px) {
#menu-item-1980 .nav-social-facebook {
float: right;
margin-right: 5px;
background: url(images/facebook.png) no-repeat right;
}

#menu-item-1981 .nav-social-twitter {
float: right;
margin-right: -12px;
background: url(images/twitter.png) no-repeat right;
}

.nav-social-facebook a {
opacity: 0;
}

.nav-social-twitter a {
opacity: 0;
}

}

where menu-item-1980 and menu-item-1981 are my links on the menu.
The problem is that the link is working (if you go cover it with the mouse), but the image is not displayed. Any idea of what could happen? Thanks

[rodya]

by the way, the address of my site is that one
http://www.viajarataiwan.es/

[Towfiq I.]

Send me the link to the social icons images..

[rodya]

here they are

http://viajarataiwan.es/wp-content/uploads/2013/11/facebook.png
http://viajarataiwan.es/wp-content/uploads/2013/11/twitter.png

i also tried to change the url on the link for those ones, but it either work

[rodya]

*neither

[Towfiq I.]

Add this to the very bottom of your stylesheet:

.nav-social-facebook, .nav-social-twitter{top:-7px;}
.nav-social-facebook a, .nav-social-twitter a{display: block;width: 32px;height: 32px;text-indent: -999999px;}
.nav-social-facebook a{background: url("http://viajarataiwan.es/wp-content/uploads/2013/11/facebook.png");}
.nav-social-facebook a{background: url("http://viajarataiwan.es/wp-content/uploads/2013/11/twitter.png");}

and remove these:

.nav-social-facebook a {
opacity: 0;
}

.nav-social-twitter a {
opacity: 0;
}

}