1

I'm trying to make a social links menu for the footer in my theme. I want a menu to be customisable in Dashboard, I want the links to be relative to what's put in there.

Originally to get that, I did this:

<a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook circle"></i></a>
<a href="http://www.google.com/" target="_blank"><i class="fa fa-google-plus circle"></i></a>
<a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter circle"></i></a>
<a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin circle"></i></a>

For hard-coded menu items.

Now, I want to use

<?php wp_nav_menu( array( 'theme_location' => 'social' ) ); ?>

To generate the <li> but realise that doing so puts the link label, i.e. Facebook inside the <li><a> tags.

i.e. <li class="fa fa-facebook circle"><a href="fb.com">Facebook</a></li>

Which isn't that great because 1. Facebook label gets in the way and 2. is the only thing that is clickable.

I want to get the link tag on the outside of my classes (being set automatically by Wordpress too through Menu customisation)

I realise I could write the <i> class inside the label for each menu item, but that defeats the purpose I'm going after here.

Edit: I'd love a solution that doesn't exclude hacking in some way.

2 Answers 2

1

This is a tough one. Normally I'd say use text-indent:-99999px; as part of the markup for <a> -- to get that link text off the screen. But you have that fa italic tag which is really text as well - so it gets shifted off the screen, too.

This solution is pretty ugly but you can probably tweak it for your use.

Wrap the social links inside a div:

<div id="social-wrapper">
    <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook circle"></i>Facebook</a>
    <a href="http://www.google.com/" target="_blank"><i class="fa fa-google-plus circle"></i>Google</a>
    <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter circle"></i>Twitter</a>
    <a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin circle"></i>LinkedIn</a>
</div>

Then, .css like this:

#social-wrapper .fa {
 color: #000;
}
#social-wrapper a {
  color: transparent;
  display: inline-block;
  margin: 0 8px;
  overflow: hidden;
  width: 15px;
}

Set that width to accommodate your .fa icon width. Here is a jsfiddle that shows how it works.

EDIT:

ok, didn't realize you couldn't get the above solution to work. Here's a less ugly version, still just using CSS. Anything beyond this and you will need to write your own implementation of wp_nav_menu to get the content the way you want it and not rely on a css solution.

Same HTML as above, with a wrapper div.

This CSS:

#social-wrapper {
    text-indent: -99999px;
}
#social-wrapper a {
    width: 30px;
    float: left;
}
#social-wrapper .fa {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    text-indent: 99999px;
}

And here's another fiddle showing how it works.

11
  • Yeah, great answer. I actually was thinking of doing this. I felt so silly by only thinking of this solution though. I understand what you mean by ugly too haha. :)
    – insidesin
    Sep 12, 2016 at 2:31
  • @insidesin Be sure to click the checkmark next to this answer to indicate that your question is resolved. Thanks. Sep 13, 2016 at 1:38
  • Thanks @EthanJinksO'Sullivan not sure why you're telling me that. It's not resolved.
    – insidesin
    Sep 13, 2016 at 7:13
  • Updated answer with another solution.
    – C C
    Sep 13, 2016 at 12:28
  • @CC It's not that I couldn't get it to work, it's that it was a bit of a hack. I'll give you the solution. I was just waiting for anything else. :P Seems no one has any clue, and Googling for hours won't help me.
    – insidesin
    Sep 13, 2016 at 13:39
0

My solution was strange. A little hacky, and going with CC's solution worked, but I think it was being bugged by something else in my footer. (I'm silly)

#social_area {
    li a {
        display: block;
        color: transparent;
        overflow: hidden;
        margin-top: -45px;
        width: 100%;
    }
}

Where HTML looked a little like this.

<ul id="menu-social-media">
    <li class="fa fa-facebook circle"><a title="Facebook" target="_blank" href="http://www.facebook.com/">Facebook</a></li>
    <li class="fa fa-instagram circle"><a title="Instagram" target="_blank" href="http://www.instagram.com/">Instagram</a></li>
    <li class="fa fa-pinterest circle"><a title="Pinterest" target="_blank" href="http://au.pinterest.com/">Pinterest</a></li>
    <li class="fa fa-yelp circle"><a title="Yelp" target="_blank" href="http://www.yelp.com/">Yelp</a></li>
</ul>

Surrounded by the #social_area div.

I think I spent an hour trying to get this to work but it was another element's style that was ruining it. (Why won't this shit work!?)

Thanks CC!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.