Social Media Icons

• 

  dimeanddust · Member · Feb 20, 2015 at 11:08 am

  • Copy link
  • Add topic to favorites

  I am trying to put social media icons in my primary menu. I have added the text widgets and loaded the images I want to use.

  It’s not working, what am I doing wrong? My site is dimeanddust.com
  I am using this as my css code:

  /* Social Icons */

  @media (min-width: 600px){
  .main-navigation .nav-social-facebook {
  float: right;
  margin-right: 40px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/46-facebook-32.png) no-repeat right;
  }

  .nav-social-facebook:hover {
  float: right;
  margin-right: 40px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/46-facebook-32.png) no-repeat right;
  }

  .main-navigation .nav-social-twitter {
  float: right;
  margin-right: 30px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/03-twitter-32.png) no-repeat right;
  }

  .nav-social-twitter:hover {
  float: right;
  margin-right: 30px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/03-twitter-32.png) no-repeat right;
  }

  .main-navigation .nav-social-instagram a {
  float: right;
  margin-right: 20px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/78-instagram-32.png) no-repeat right;
  }

  .nav-social-instagram:hover {
  float: right;
  margin-right: 20px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/78-instagram-32.png) no-repeat right;
  }

  .main-navigation .nav-social-bloglovin a {
  float: right;
  margin-right: 10px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/smaller-heart.png) no-repeat right;
  }

  /* Social Icons */

  @media (min-width: 600px){
  .main-navigation .nav-social-facebook {
  float: right;
  margin-right: 40px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/46-facebook-32.png) no-repeat right;
  }

  .nav-social-facebook:hover {
  float: right;
  margin-right: 40px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/46-facebook-32.png) no-repeat right;
  }

  .main-navigation .nav-social-twitter {
  float: right;
  margin-right: 30px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/03-twitter-32.png) no-repeat right;
  }

  .nav-social-twitter:hover {
  float: right;
  margin-right: 30px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/03-twitter-32.png) no-repeat right;
  }

  .main-navigation .nav-social-instagram a {
  float: right;
  margin-right: 20px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/78-instagram-32.png) no-repeat right;
  }

  .nav-social-instagram:hover {
  float: right;
  margin-right: 20px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/78-instagram-32.png) no-repeat right;
  }

  .main-navigation .nav-social-bloglovin a {
  float: right;
  margin-right: 10px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/smaller-heart.png) no-repeat right;
  }

  .nav-social-bloglovin:hover {
  float: right;
  margin-right: 10px;
  background: url(https://dimeanddust.files.wordpress.com/2015/02/smaller-heart.png) no-repeat right;
  }

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

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

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

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

  The blog I need help with is: (visible only to logged in users)

• 

  dimeanddust · Member · Feb 20, 2015 at 11:08 am

  • Copy link

  Sorry I accidentally pasted the first part twice

• 

  susanhayse · Member · Feb 20, 2015 at 11:35 am

  • Copy link

  The Cocoa theme you’re using has a special Social Media menu but it’s not located up in the Menu bar where you want the icons to appear.

  Someone else with more experience in CSS can correct me, but I don’t think you can do this with straight CSS. The new div you’re trying to put in that main Menu Wrap area won’t let you. It would have to be defined in the theme function file first and that’s not possible without a Custom Design Upgrade.

• 

  thesacredpath · Member · Feb 21, 2015 at 9:31 pm

  • Copy link

  @dimeanddust, I see you have changed to the Zuki theme. To add social icons to the menu, you have to first add your social links as custom links in your primary custom menu. Once that is done, you can use the web inspector built into your browser to find the specific menu id of each of them (each menu item has a specific id). Then you can add a background image declaration and turn the text in the social menu label transparent such as in the below example:

  #menu-item-221 {
  background-image: url("URL_OF_IMAGE");
  }
  #menu-item-221 a {
  color: rgba(0, 0, 0, 0);
  }

  Those are the basics. The second rule above turns the text label on the menu item transparent using RGB color and a 0 opacity (fully transparent). Give it a go and let us know if you have any problems.

• 

  susanhayse · Member · Feb 21, 2015 at 11:37 pm

  • Copy link

  Cool! Thanks @thesacredpath – learned something today!

• 

  thesacredpath · Member · Feb 23, 2015 at 9:40 pm

  • Copy link

  You are welcome.