Replacing Text on Main Navigation with Social Media Icons

• 

  athlonsolutions · Member · Feb 10, 2017 at 9:49 pm

  • Copy link
  • Add topic to favorites

  I am trying to display social media icons in place of the text (ex: Facebook, Twitter, etc.) on the custom link navigation buttons. I have worked through 15 different suggested tutorials to complete this task with no luck. I located all icons for this task and saved to the image library on the admin side. The site is as follows: https://athlonsolutions.wordpress.com/

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

• 

  thesacredpath · Member · Feb 13, 2017 at 5:49 pm

  • Copy link

  Hi there, for your Linkedin, Facebook, Twitter and Instagram menu items, add the following to replace the text with the icons I found in your media library.

  #menu-item-752 a {
  	background: url('https://athlonsolutions.files.wordpress.com/2017/02/facebook-color.png') no-repeat scroll center / contain;
  	color: rgba(0, 0, 0, 0);
  	text-indent: -9999px;
  }
  #menu-item-752 a:hover {
  	color: rgba(0, 0, 0, 0) !important;
  }
  #menu-item-757 a {
  	background: url('https://athlonsolutions.files.wordpress.com/2017/02/instagram-icon-orange-f.png') no-repeat scroll center / contain;
  	color: rgba(0, 0, 0, 0);
  	text-indent: -9999px;
  }
  #menu-item-757 a:hover {
  	color: rgba(0, 0, 0, 0) !important;
  }
  #menu-item-753 a {
  	background: url('https://athlonsolutions.files.wordpress.com/2017/02/twitter-color.png') no-repeat scroll center / contain;
  	color: rgba(0, 0, 0, 0);
  	text-indent: -9999px;
  }
  #menu-item-753 a:hover {
  	color: rgba(0, 0, 0, 0) !important;
  }
  #menu-item-755 a {
  	background: url('https://athlonsolutions.files.wordpress.com/2017/02/linkedin-icon-orange-f.png') no-repeat scroll center;
  		color: rgba(0, 0, 0, 0);
  	text-indent: -9999px;
  }
  #menu-item-755 a:hover {
  	color: rgba(0, 0, 0, 0) !important;
  }

• 

  athlonsolutions · Member · Feb 13, 2017 at 5:52 pm

  • Copy link

  You are wonderful! Thank you! This worked perfectly.

• 

  athlonsolutions · Member · Feb 13, 2017 at 6:58 pm

  • Copy link

  Is it possible to align the icons to the right?

• 

  thesacredpath · Member · Feb 14, 2017 at 1:27 am

  • Copy link

  Hooray!

  You can add the following to the very bottom of your custom CSS to move the social menu items to the right. You will notice that it will reverse the order of the icons. You can rearrange them as you see fit by editing your custom menu and changing the order.

  @media screen and (min-width: 961px) {
  #menu-item-752, #menu-item-753, #menu-item-756, #menu-item-757 {
  	float: right;
  }
  }

  I’ve limited this change to 961px and wider screens. At 960 and narrower, the touch device menu activates and this change would make things messy on the touch device menu.