display image at menu

• #60691

  
  rodya
  

  On November 20, 2013 at 6:29 pm

  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

  #60692

  
  rodya
  

  On November 20, 2013 at 6:30 pm

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

  #60946

  
  Towfiq I.
  

  administrator

  On November 21, 2013 at 5:53 am

  Send me the link to the social icons images..

  #61195

  
  rodya
  

  On November 21, 2013 at 4:01 pm

  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

  #61197

  
  rodya
  

  On November 21, 2013 at 4:06 pm

  *neither

  #61711

  
  Towfiq I.
  

  administrator

  On November 22, 2013 at 6:16 pm

  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;
  }

  }