Social icon images in header – removing text

• 

  thorayaelrayyes · Member · Jan 13, 2015 at 11:17 am

  • Copy link
  • Add topic to favorites

  Hello,

  I used a previous thread I found in the support forum to add social media icons to my main menu. But it looks very busy with all that text as well as icons.

  Is there a way to keep just the icon and stop the text from appearing (I tried adding “display: none” in the CSS for the menu item but that made the image disappear as well)?

  Also, I am wondering if there a way to right-align just those two social media menu items?

  Thanks in advance :)

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

• 

  designsimply · Member · Jan 14, 2015 at 11:58 am

  • Copy link

  I like this image replacement technique:
  http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

  Here is an example of using it to replace the “Instagram” menu item in your current menu with just the icon:

  In your Appearance > Customize > CSS editor, replace this:

  #menu-item-207 a {
  	background-image: url('https://thorayaelrayyes.files.wordpress.com/2015/01/instagram.png');
  	background-repeat: no-repeat;
  	background-size: 25px;
  	background-position: 15px 50%;
  	padding-left: 50px;
  }

  With this:

  #menu-item-207 {
  	width: 50px;
  }
  
  #menu-item-207 a {
  	text-indent: 100%;
  	white-space: nowrap;
  	overflow: hidden;
  	background: url('https://thorayaelrayyes.files.wordpress.com/2015/01/instagram.png') center no-repeat;
  	background-size:25px;
  }

  Aside: Hemingway Rewritten is a great theme choice! I like how the header image you picked looks in it.

• 

  thorayaelrayyes · Member · Jan 14, 2015 at 2:04 pm

  • Copy link

  Oh fabulous! I love the way that looks, thank you.

  I love the theme as well, and making the image was quite an adventure.

  Hope you’re having a great day :)

• 

  designsimply · Member · Jan 14, 2015 at 4:06 pm

  • Copy link

  Yay! I’m so glad that worked out. My day is going pretty well so far :) I hope you have a great day too.