Twenty Eleven social Icons in Navigation

Over on the WordPress forum a question came up about adding social media icons to the navigation bar in a twenty eleven child theme, answers were given changing code in the header.php file.

The question came from a novice who was not sure about changing code, so thinking about this and how we can use WordPress to do most of what we wanted we came up with a simple solution, it only requires grabbing icons, resizing them a few lines of code in style.css and using the built in custom menu structure.

The Social Icons

We always recommend that you use legal images, never grab images from other websites or Google, so get over to My Site My Way and download some royalty free icons, they have a fair range of different styles that are legal to use in our websites and themes.

We need to resize the icons, there are many different packages we could use, all we have done is to navigate to the download, extract the icon to a folder opened it in an imaging package, this can be Photoshop, Elements, DrawPlus, Paint, Gimp or any package that will allow us to resize the image, we are resizing our image to 42px * 42px.

twitter-nav-1

In our child theme we create a new folder called /images/ if we have not already done this, and we save our icon image using the “Save As” option, we save this into the child themes images folder with the name of the social media, like here twitter.png

twitter-nav-2

Child Theme Download

You may download the file here or visit the All Downloads page for other files.

Twenty Eleven Social Navigation

style.css

Now we need to give each of our icons a style class of it’s own, we are adding the classes in the navigation area which has an id of #access, we want to float these to the right, make the text color transparent, remove the hover effect and use our images as backgrounds.

In our child themes style.css we add a style block for each of our social media icons, here is our twitter block, we copy and rename the elements for any other icons we want to show in our menu.

/* Twitter Icon */
#access .nav-twitter {
width: 50px;
text-align: center;
float: right;
}
.nav-twitter,
#access .nav-twitter:hover >a,
#access .nav-twitter a:focus
{
background: url('images/twitter.png');
background-repeat: no-repeat;
padding: 0;
}
.nav-twitter a
{
color: transparent !important;
padding: 0;
}

That is all the code we need to add, we are now going to use the built in options of the WordPress menu to do the rest.

The Menu

We are now going to create a new item for our menu, we do this in Admin > Appearance > Menus, if you have not created a custom menu yet then you will need to do so, the images below are for a custom theme and will be different to a standard Twenty Eleven theme, but the workflow is the same.

From the Screen Options tab make sure we have selected the ‘Custom Links’ and  ‘CSS Classes’ checkboxs.

twitter-nav-3

Next we create a Custom URL menu item with a link to our social media websites, and add this to our menu, as we are floating these to the ‘right’, then these should remain at the the end of our menu.

twitter-nav-4

Our last step is to add the class we created in the style.css to our menu item, we just add nav-twitter to the CSS Classes box and ‘Save Menu’

We have used another of our screen options to show the ‘Link Target’ as we do not want our visitors leaving our site, we will open the link in a new window.

twitter-nav-5

Here we have three of the icons in our menu, notice how we use mailto: to send an email.

Warning: See comments below E-Mail “Navigation Label” must not have a hyphon, so use “Email” and not as per the image E-Mail, as this breaks in Internet Explorer, as the icons are only 50px wide keep the captions short 5 or 6 characters!

That is it fairly easy solution using as much of the standard system as we could, have fun!

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

58 thoughts on “Twenty Eleven social Icons in Navigation

  1. I tried this, it worked fine for one link but when I tried to add a 2nd link I ran into alignment problems. Do you have to use a absolute position instead of relitive ?

    • Hi Mike,
      We only wrote this up in reply to a question, so only tested with one icon, we have now updated the post css and created a sample downloadable child theme with three more icons.

      Cheers

      David

  2. HI Dave I was able to download and cut and paste the code into my child style sheet. I noticed that the nav bar is wider (taller) now. Is there a way to fix this ?

    Thanks,
    Mike

    • Hi Mike,
      In twenty eleven theme the items wrap to the next like, removing the styles adding some dummy items does your theme wrap the menu?

      Regards

      David

    • I was able to replicate this, nothing to do with stylesheet, it only happens with IE, and is affected by the menu item text caption E-Mail just remove the hyphon ‘-’ to Email and it works!

      Now don’t ask me why this happens lol

      David

  3. I don’t have that answer, I slowly wrapping my head around twenty eleven. I know if i don’t get too ambitious I can stay out of trouble.

    Below is my twentyeleven child theme

    Mike

    Code Removed: Nothing Wrong in Stylesheet see reply below! :)

    • The nested comments were removed by a plugin, the answer was a missing closing php tag ?>

      This has been fixed in the download which should now work ok!

      David

          • HI David,

            Thanks, i made the changes and they worked, however when I add the third icon the menu bar is forced wider then dissapears when you hover over the icon. I am using
            firefox 6.0 on my mac

            • Hi Mike,
              I thnk it could just be the length of the title, try just a short title they are not displayed ‘linked’ as the width is only 50px

              Failing that, zip and send me your theme and I will have a look.

              David

  4. Hi Dave
    I am using this on a child of twentyeleven and notice that there can be a problem when hovering over the icons, especially the rightmost. The link gets a bit mixed up and you have to place the cursor carefully to get the correct link. I found that the problem is in the
    .nav-xxxx a { padding: 0; }

    This needs an !important if you are importing the twentyeleven css

      • I’m still having this issue. I added !important, but still can cleanly select the twitter icon. It seems like the facebook button is blocking it. Any suggestions? thanks

        • At first: thnx uploader for this code, which helped me putting my social media icons in the nav bar! Great stuff. I had the problem too that the links under each icon where longer then the icon itself, so when I hovered over the twitter icon, I still saw the facebooklink lighting up in the bottom of the screen. Very confusing for those visiting your website.

          I managed to sort this out by adding text-indent: -9999px; to the #access .nav-facebook {

          The first part of my facebookcode now looks like this:

          /* Facebook Icon */
          #access .nav-facebook {
          width: 32px;
          text-indent: -9999px;
          text-align: center;
          float: right;
          }

          Goodluck to anybody with the same problem!

  5. Hi David, I added the code you supplied for adding icons into nav bar and have everything correct in Menu panel (pretty sure) and the “Navigation Label” text is showing up over the twitter icon. Do you know why this is? Here is the link so you can take a look:
    http://ehub24.webhostinghub.com/~shapes6/

    Thanks in advance, Dale

    • I see you have fixed it, as I do not see it, if you are still seing the text then, Ctrl + F5 to clear your local temporary internet files.

      David

  6. David,

    Thanks for this article! I am actually using this to create my navi links… This seemed to be the easiest way to achieve this. My only issue now is who do I make the navigation bar wider in the vertical direction? I would like to add larger images than 42px42px.

    FYI, I have been looking for a solution for placing images in the navigation bar for twenty eleven for a long time and I have a dead line… So this really helped! Thanks again!

    http://omgiatest.com

  7. Everything seems fine until I look at my site on a phone. The icons appear but the disappear when I scroll. Sometimes just one appears!

    Any ideas? Does this happen on your site?

    • Hi,

      I’m facing a similar issue – I’m nowhere close to testing this on a phone! :-)
      Only one icon appears. The other two only show when I right-click on the placeholder for those icons. Have you managed to figure this one out? What could I be doing wrong?
      BTW, I’ve widened the column width using the rule:
      .one-column #page {
      max-width: 1000px;
      }
      And I’ve hidden the search box using:
      .one-column #branding #searchform {
      display: none;
      }

  8. I have the social icons working great in most browsers. Of course IE8 is our problem child. (Did not test in IE7 yet.) The text of each link is appearing on top of the white icons I have choosen. Any suggestions on how to fix this?

  9. hi! thanks for this~was very excited to find such clear instructions…. unfortunately once i did everything, i saw this in the Theme Locations field of the Menus page: “Your theme supports 1 menu. Select which menu you would like to use.” so… the menu we created is there, but if i select it, it replaces my pages menu in the nav bar. thoughts?
    (i am using twenty-eleven btw.)
    thanks! you rock!

  10. Hi,
    I tried this with Twenty Ten, and it kinda worked…but I’m having some troubles. Was wondering if you wouldn’t mind taking a look at the code.

    Thanks,
    Niki

  11. Hi David,

    Thanks for this post – exactly what I was looking for, and the steps seem simple enough.

    I’m using the Twenty Eleven theme and have created a child theme from it. The one change I have made is made the content wider (1000px) using a rule in style.css.

    I have followed the steps provided here and have been able to create links on the right side of the nav bar (just to the left of the search box). However, only the twitter icon shows up but the facebook and google+ icon are not displayed. The twitter link works perfectly – no highlighting on hover, etc. When I take the mouse over the FB and G+ link areas, the area is highlighted (with a whitish background, as they are for other links on the nav bar) but the icons are still not displayed. The text over the background image is transparent. The icons are all 42x42px in size.

    Changing the order of the links also does not work and even then only the twitter icon is shown. Would really appreciate your help here. Thanks!

    Saurabh

  12. Please, can you tell me why i don’t see the icons in the menu?

    I downloaded the twentyeleven-social and placed it in themes, like this:
    twentyeleven
    twentyeleven-social
    twentyten

  13. I have a fairly minor issue, but damned if I can’t figure out the last part of my problem. I have (SOME of) my social media icons lined up in my subscribe banner, per the Appearance>traction options>subscribe links menu. I am offered the options of enabling facebook and flickr, none else.
    However, on my Appearance>editor>subscribe.php page, I have this

    followDisable() != ‘true’ ) { ?>

    facebookToggle() == ‘true’ ) { ?>

    <a href="facebook(); ?>”><img src="/images/flw-facebook.png” alt=”"/>

    flickrToggle() == ‘true’ ) { ?>

    <a href="flickr(); ?>”><img src="/images/youtube.png” alt=”"/>

    twitterToggle() == ‘true’ ) { ?>

    <a href="http://twitter.com/twitter(); ?>”><img src="/images/flw-twitter.png” alt=”"/>

    <a href="”><img src="/images/flw-rss.png” alt=”"/>

    I’m sure there is an easy way to adjust this to include youtube and wordpress icons/links rather than flickr and twitter, but when I tried inserting the appropriate code, no dice. Also was perplexed as to why there is no option to enable twitter on my Appearance>traction options page, yet the necessary code for a twitter link in my “subscribe” banner is right between facebook and the rss feed on my subscribe.php page.
    Closest I came to fixing the issue was by linking the flickr hyperlink to my youtube channel, and replacing the flickr.png with my youtube.png icon, but the size and alignment is off. Any help would be greatly appreciated!
    Brent

  14. please help me sorting a problem in genesis news child theme, searched the whole web but dint found the solution. please have a look on the link below, i have pasted a pic of the problem am facing. thanks in advance. it’s kinda urgent. :(

    http://i.imgur.com/maRrl.png

  15. Likewise, I am on WordPress 3 and having followed instructions here are the problems encountered:
    – Replacement of existing top menu with the newly created custom menu.
    – I tested with a Twitter social icon and I do not see the image shown on the menu but when I hover my mouse on it, I could see it’s there and I’m able to click on the ‘invisible’ twitter link.
    – Newly created social menu is aligned to the left of the page and not right.

    …Any thoughts anyone?

  16. I’m using a child theme I created for twenty eleven. In the Menu tab, all of my Menu options are greyed out so that I can’t select them. Can you tell me what the issue or how I can fix it?

  17. Pingback: Website | Pearltrees

  18. Pingback: A few great WordPress TwentyEleven theme edits - Yasha Harari

  19. I am new to this, and I just can’t seem to get thisto work…

    Two issues:
    1) Despite the fact that the style.css calls out that they float to the right, they dn’t.
    2) The images will not show up, only the label names.

    I tried it from scratch, and downloaded your style sheet and images directly. Neither works.

    Any help for a complete newb?

  20. Yes, first of all thanks for the code. Everything seems fine until I look at my site on a phone. Sometimes icons appear but the disappear when I scroll i think its my theme error.

  21. Hi there-
    This is outstanding, really appreciate it. However, I followed the step by step instructions with my child theme. I’m trying to use two icons – youtube and facebook. I’ve placed the code in my style.css in multiple areas (wondering if I’m just setting it in the wrong location) and I’m getting nothing. As well, when I’m in the MENUS section on wordpress I do not have the CSS Classes option – which seems it may be my issue? Is there some way I need to enable this option?

    Thanks so much!

  22. Nice easy instructions, thanks! I had this working great while I was using a plugin to put the menu at the top and round the corners. I decided to uninstall that plugin and place the menu back to where it belongs in the twentyeleven theme. Now, it only displays the social icons when I hover over them, not when the page loads. My site I’m temporarily holding this is http://www.homenetworksecurityhelp.com/wordpress. Can you see any problems with it? I have your instructions entered exactly like they should be.

  23. Hello Admin, I’ve used this method once before and worked fine. But this time I can’t get the icon to appear. I’ve added code to css, created the menu item and added a resized icon image into a folder ‘images’ in my child theme. Nothing appears. It seems so straightforwrd, but isn’t working. Any suggestions? Please? It’s driving me slightly nuts.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More