Social Media Icon Links Not Working

• 

  rivercitybrassband · Member · Jul 22, 2015 at 3:53 pm

  • Copy link
  • Add topic to favorites

  Hello! I have successfully added social media icons to our site’s secondary navigation bar. I did it all through custom CSS that looks like this:
  li#menu-item-1804 {
  background-image: url(‘https://rivercitybrassband.files.wordpress.com/2015/07/1437597824_facebook.png’);
  Background-repeat: no-repeat;
  background-position: 0 0;
  display: block;
  height: 24px;
  width: 24px;
  padding: 0;
  margin-left: 6px;
  outline: none;
  text-indent: -9999px;
  float: right;
  }

  However, it appears that the icons are no longer clickable. The correct URLs are in place in the WP “Menus” toolbar, and the menu items are not labelled. What happened?

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

• 

  darrellschulte · Member · Jul 22, 2015 at 11:05 pm

  • Copy link

  Hi rivercitybrassband,

  I must say that this is interesting. My initial thought is that adding a link to a background image is probably a non-starter. Before I say it can’t be done, could you add a some link text to one of your menu item links?

  <a target="_blank" href="http://www.facebook.com/pages/River-City-Brass-Band/154069789295"></a>

  Right now, it’s empty. I’d like to see if the behavior changes if you have the link text in place.

  <a target="_blank" href="http://www.facebook.com/pages/River-City-Brass-Band/154069789295">Facebook</a>

• 

  rivercitybrassband · Member · Jul 24, 2015 at 3:25 pm

  • Copy link

  I added text to the Instagram menu item, and I can now click through. It just looks awful! I left it up for reference.

• 

  rivercitybrassband · Member · Jul 24, 2015 at 3:37 pm

  • Copy link

  Update! I got the links to work from the images by adding an “a” to my CSS code. Now I just need to fix the alignment.

  li#menu-item-1804 a {
  	background-image: url('https://rivercitybrassband.files.wordpress.com/2015/07/1437597824_facebook.png');
  	Background-repeat: no-repeat;
  	background-position: 0 0;
  	display: inline;
  	height: 24px;
  	width: 24px;
  	padding: 0;
  	margin-left: 3px;
  	outline: none;
  	float: right;
  }

• 

  darrellschulte · Member · Jul 25, 2015 at 5:09 am

  • Copy link

  Nice work. Did you get your alignment issues resolved?

• 

  rivercitybrassband · Member · Jul 27, 2015 at 5:59 pm

  • Copy link

  I did- see the last two lines here:

  li#menu-item-1804 a {
  	background-image: url('https://rivercitybrassband.files.wordpress.com/2015/07/1437597824_facebook.png');
  	Background-repeat: no-repeat;
  	background-position: 0 0;
  	display: block;
  	height: 24px;
  	width: 24px;
  	padding: 0;
  	margin-left: 0;
  	outline: none;
  	float: right;
  	vertical-align: bottom;
  	margin-bottom: -10px;
  }