How I Added Social Media Icons to the Navigation Menu of the SmallBiz Theme

by on July 16, 2012 · 69 comments

Social Media Icons in Menu Bar | SmallBiz Theme

I spent a while figuring out how to add social media icons to the menu of the SmallBiz theme, and I hope by sharing it will save you some time. Personally, I have an internal debate over whether or not I want the icons on my nav bar, and I would love to know your thoughts. Once I get someone to my site do I want to lure them away with the party going on over at Facebook?ย  On the other hand the Google+ link or a sign up for my RSS feed via email is a great idea. If you find this post helpful I would love to hear your feedback in the comments.

Enough chat, let’s get down to business. You need a few things:

  • Social Media Icons
  • The CSS Code
  • Enable the CSS option on your custom menus

Social Media Icons

  • Use your favorite, or look at IconFinder.com which gives you a huge amount of flexibility for sizing images and picking ones that match your theme.
  • I sized the icons on my menu bar at 20 x 20
  • Upload the icons to your Media Files.ย  Copy the File URL and paste in in a text editor for use in the next step.

The CSS code:

  • Notes: put the code into your Dashboard -> Appearance -> Editor -> SmallBiz: Stylesheet (style.css)
  • If you want to rearrange the order, feel free, but you will note that the code for menu-Twitter (margin-left) is slightly different than the following three social icons.
  • I used Margin Left 70 so I could center the icons beneath the logo in my header, play with that number to what suits you best.

.menu-twitter {
text-indent: -9999px;
background-image: url(https://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: 70px !important;
width: 30px;
}
.menu-facebook {
text-indent: -9999px;
background-image: url(https://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}
.menu-rss {
text-indent: -9999px;
background-image: url(https://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}

.menu-google {
text-indent: -9999px;
background-image: url(https://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}

NOTE: This is the code that works just fine on my site and a few others I have done this on; however I have had people tell me that they have needed to add ‘ around the http string (so ‘http://www.YourFileURL.png’) if what I have above doesn’t work, try that.

Social Media Icons in your Navigation Bar | SmallBiz ThemeMenu

  • Go into your Menu’s
  • At the top right of the screen click on Options, enable Link Target and CSS enable.
  • Along the left hand side you will want to create Custom Links.ย  Put in the url of your first social media location (your Twitter url) and call it something obvious – Twitter.
  • Add to Menu
  • Go to the right hand side, where you see the list of items in your menu bar, and click on the little triangle in the right next to Custom.
  • Put in the CSS name (menu-Twitter)
  • Check Open link in a new window (if you want)
  • SAVE
  • Repeat the process for each social icon you are adding.

[youtube http://www.youtube.com/watch?v=KLT0pXkvcSE?rel=0&w=560&h=315]

I think I made this look easy ๐Ÿ™‚ย  Take a look at the video, as that may be more clear than the writing.ย  Feel free to ask questions, or share your site, I would love to see your work! And let me know, do you think social icons in the navigation bar is a good idea or bad?

About Eileen

Eileen Lonergan is a WordPress website designer who has a concentration in SEO. To learn more about Eileen and see her work visit her website: http://www.EileenLonergan.com

Article by ยป

Eileen Lonergan is a WordPress website designer with a focus on SEO. To learn more about Eileen and see her work visit http://www.EileenLonergan.com

Eileen has written 14 articles on Expand2Web

Author Connect ยป Twitter | |

See my disclosure about advertising and affiliate links

{ 69 comments… read them below or add one }

Yvonne Herbst July 16, 2012 at 3:55 am

Thank you for this great tip, Eileen — your “how to” articles are always so clearly explained and illustrated. This will be very useful for me.

Reply

Eileen Lonergan July 17, 2012 at 3:45 am

Thank you Yvonne. I do hope it is useful! Let me know if anything doesn’t make sense and I will help clarify.

Reply

Julie Larson July 16, 2012 at 5:26 am

Love it, Eileen!!! I also like that you have the icons open in a new window! You’re awesome!!!

Reply

Eileen Lonergan July 17, 2012 at 3:41 am

Thank you Julie. That is actually an option in the WordPress menu’s dashboard.

Reply

Blaine July 16, 2012 at 7:56 pm

I just book marked this thread and know what I will be playing with first thing in the morning. Thank you Eileen!

Reply

Eileen Lonergan July 17, 2012 at 3:39 am

Thanks Blaine. I am curious to see your finished product. Feel free to tell me if parts of the tutorial need clarification. The video may also help.

Reply

Laura July 17, 2012 at 6:19 am

Awesome! Thanks Eileen for making this another to do this summer! : )

Reply

Eileen Lonergan July 17, 2012 at 6:21 am

Ha! I didn’t mean to add to the long list of To Do items! I am curious, do you think it is a good idea to put the icons on the nav bar, or do you think it will tempt people away from a site?

Reply

Julie Larson July 17, 2012 at 7:03 am

I’m thinking that I would not add them to the menu bar because when I’m on an interesting site (like yours), I explore it using the menu bar. I wouldn’t want people leaving the site. They expect them to be in a sidebar widget or at the bottom and expect to be taken off the site when they’re done going through it. Just my humble opinion…what do you think, Eileen?

We thought you could test it out for all of us! lol

Reply

Eileen Lonergan July 17, 2012 at 8:45 am

It is interesting that I have picked up a few Twitter followers over the past couple of days, so that could be a bonus. It is an interesting discussion, I appreciate the feedback!

Reply

Laura July 17, 2012 at 7:33 am

This looks like a fun to-do! I do think the social icons on the nav bar is great for socially connected sites. but, if you are a service type site and your customer is needing a service/product right away I might opt for the icons to be in a less tempting spot. Just my thoughts….

Reply

Eileen Lonergan July 17, 2012 at 8:43 am

I appreciate your thoughts, they are very tempting right there!

Reply

jocelyn July 19, 2012 at 8:33 am

Thanks for this post.You made it very easy to follow.

Reply

eileen lonergan July 19, 2012 at 8:53 am

Terrific! Share your url so we can see your site!

Reply

One Tree Spaces July 20, 2012 at 1:15 am

Thank you so much for this great piece, Eileen – just what I needed at this time.

Reply

Eileen Lonergan July 20, 2012 at 3:04 am

Your site is looking great. I love your logo. Let me know if you get stuck and need any help.

Reply

Julie Larson September 11, 2012 at 1:13 pm

Eileen, we just switched over the new full width SmallBiz Theme and added our social media icons to the navigation bar. You made it super easy!!!

Thank you!!!
Julie ๐Ÿ™‚

Reply

Eileen lonergan September 11, 2012 at 7:00 pm

Oh good, thank you!

Reply

Dan Bryan September 22, 2012 at 3:17 pm

Hi, Thank you for the great post. When I followed your steps though the image didn’t show up but rather my navigation title (facebook) did. How can i fix this?

Reply

eileen lonergan September 23, 2012 at 8:03 am

Dan, I am sorry you are having trouble. The first step is to upload the Facebook icon to your media file. Go to Media, add new, upload the icon, copy the File url and click save. It will look something like this: http://www.YourWebsite.com/wp-content/uploads/2012/09/facebookIcon.jpg.

Then when you go into your CSS editor add the code

.menu-facebook {
text-indent: -9999px;
background-image: url(http://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}

Make sure that you put in the correct file url for the Facebook image. After you try that, can you let me know if you have success or if you are still stuck we can trouble shoot further.

Reply

Kyle October 30, 2012 at 5:09 am

Hello Eileen,

I recently took on a website for a friend that the theme was developed in Pagelines and then used in Wordpress.

Now I followed your steps but the icons are not showing up, any recommendations. Did I place the CSS menus in the wrong area? It is essentially working but I don’t feel it’s calling my menu.” ” in the css where the icons are documented.

Please help. Thank you.

Kyle

Reply

Eileen Lonergan October 30, 2012 at 7:08 am

Kyle, I am sorry you are having trouble. I am going to private message you to see if we can get this resolved.

Reply

Prapti November 16, 2012 at 8:14 am

Hello Eileen,
I wrote the css code in my editor page and replaced the url with my saved url but my menu doesn’t show any ‘enable css ‘ button. So if I’d like to put the social links at the bottom of my page , what shall I do .
Please help.
Thank you.
Prapti

Reply

Eileen Lonergan November 16, 2012 at 8:33 am

Hi Prapti, thank you for asking for clarification. I am not sure why you don’t have enable CSS in the menu – maybe double check, go to the top right page of the menu screen and look for Screen Options. This will give you a drop down menu of choices, enable CSS can be found here, on the second line of options. If that does not work and you want to put the images at the bottom of your page, then you can simply upload the images and in the last line of the upload screen you can place in the link url code. Please let me know if you need further assistance.

Reply

Prapti November 16, 2012 at 8:38 am

Thankyou so much for the quick reply .But I don’t have much space in my menu bar so is there any other way to put social network links in everypage of your website at the same time and once again Thankyou so much ๐Ÿ™‚

Reply

Eileen Lonergan November 16, 2012 at 9:04 am

You could hard code them into your page.php file.

Reply

Prapti November 16, 2012 at 9:34 am

thank you ๐Ÿ™‚

Reply

Eileen Lonergan December 19, 2012 at 4:45 pm

Welcome!

Reply

sudhansu sekhar November 20, 2012 at 11:50 pm

Thanks for this post.You made it very easy to follow.

Reply

Eileen Lonergan December 19, 2012 at 4:45 pm

You are welcome Sudhansu! I am happy that it worked for you.

Reply

Angela November 24, 2012 at 4:55 pm

I just did this, have the menu setup and the images in place..but it is not linking at all? No sure if it is the theme or something I did wrong?

Thank you!

Reply

eileen lonergan November 26, 2012 at 7:12 am

Angela, did you put the url of the social media site into the correct place on the custom menu? It is in the section of the tutorial called Menu. Please let me know if this solves the issue.

Reply

Chris November 26, 2012 at 12:21 pm

If you need a timesaver, or don’t know HTML, Nifty Buttons (http://niftybuttons.com) allows you to pick your icons and then generate the code automatically. Takes just a few seconds.

Chris B

Reply

Eileen Lonergan December 19, 2012 at 4:44 pm

Thanks Chris, that site has a lot of great choices!

Reply

Ollie December 19, 2012 at 1:45 pm

Hi Eileen, I’ve just had a go at this one but instead of icons appearing in my nav bar it is just plain writing. any ideas why this could be? I’ve gone over it a couple of times to see if i’ve missed something. I’m probably missing something simple here. ๐Ÿ™‚

Reply

Eileen Lonergan December 19, 2012 at 4:43 pm

Hi Ollie, I am sorry you are having trouble. Let’s start with the first step, did you put the proper code into the style sheet?

.menu-twitter {
text-indent: -9999px;
background-image: url(http://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: 70px !important;
width: 30px;
}

Make sure that background-image: url(http://www.YourFileURL.png) YourFileURL.png matches what you uploaded into the Media file. If that doesn’t solve it, please let me know.

Reply

David January 4, 2013 at 9:15 pm

Hi Eileen,

Thank you for the tutorial, very detailed and educational. I am actually trying to place my social media icons directly above my search button. Although this area is certainly close to the Navigation Menu, it actually is not part of the nav menu. Therefore, I can’t quite get it to work out.

Perhaps you would be kind enough when you have a moment to take a look at my site and location directly above the search button to see what I might need to do to achieve my desired social media icon placement.

Thank you kindly,

David
TreasureValleyBusiness dot com

Reply

Eileen Lonergan January 5, 2013 at 5:57 am

David, I am not sure which theme you are using, is your search area part of a widget? If so, put the icons into a widget. Or look at the page files and hard code the icons and links into the area just below the nav bar and above the search box.

Reply

Sophia February 9, 2013 at 6:06 am

Thanks for the tutorial. I tried it and selected the transparent but my images were not fully displayed and were not position to the right as yours were. Here is my stylesheet code:

.menu-twitter {
text-indent: -9999px;
background-image: url(http://www.firenaturals.com/wp-content/uploads/2013/02/Twitter-px.png) !important;
background-repeat: no-repeat !important;
margin-left: 70px !important;
width: 30px;
}

.menu-facebook {
text-indent: -9999px;
background-image: url(http://www.firenaturals.com/wp-content/uploads/2013/02/facebook.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}

.menu-youtube {
text-indent: -9999px;
background-image: url(http://www.firenaturals.com/wp-content/uploads/2013/02/youtube.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}
Where did I go wrong

Reply

Eileen Lonergan February 10, 2013 at 2:21 pm

Sophia, I have used these steps on other sites, and I have had to play with the code a bit, try playing with the 70 pixels a bit. If your icons are wider than mine were, try changing the 30 to 40, and maybe tweak -15 to something else. I am a bit concerned with why they aren’t showing up though. I am on the east coast and due to the blizzard I am without power which is throwing me off my game. I should be back full force by Thursday night (gasp!)

Reply

Sophia November 16, 2013 at 6:17 pm

A bit late but thank you so very much. lol. I took your advice and it worked.

Do you have a tutorial or able to say how I may add google search in the navigation bar?

Thank you.

Reply

Eileen Lonergan November 16, 2013 at 7:24 pm

I am glad it worked and thanks for letting me know. I really don’t know how to get a search box into the nav bar, if you figure it out will you let us know?

Reply

Derrick Dustin February 10, 2013 at 1:45 pm

Nice video. I’d like to show the number of facebook likes with the “f” icon. Do you know how I can do this? thanks

Reply

Eileen lonergan February 10, 2013 at 2:12 pm

Gosh Derrick, I don’t know. That would require a different type of coding, as this is just an image with CSS. I need to think about that.

Reply

Emily Fisher June 1, 2013 at 9:02 am

I have found this tutorial helpful so far… But I am stuck. I have entered all the image code urls etc and have the code ready to go in… but where do I paste the code within my Style sheet? I am using Twenty Twelve theme and am not sure where to insert the code within it.. nothing I am trying is working… I read someting about a table within the code sheet? Hope someone can help? Emily

Reply

Eileen Lonergan June 1, 2013 at 9:32 am

Hi Emily (aka Social Sparkles), if you look under Appearance, then Editor, then CSS (which should pop up by default). There will be a line that says Paste custom styles below this line. Put it there. Keep me posted and share your url so we can see your site!

Reply

Emily Fisher June 1, 2013 at 10:26 am

Oh hi thanks, I have just scrolled through all my CSS and I cant see any ‘paste customer styles below… will it be near the top or bottom? Will it be under any particular sub category of code ie /*banner*/ /*Navigation*/? or some thing?!

Reply

christiana charles.iyoha June 18, 2013 at 12:47 am

thanks a million, eileen. I am still learning how to optimize the small biz theme. this is quite insightful. I will also require a copy of your book on traffic.

Reply

LinuxGeek June 30, 2013 at 12:49 am

This is a awesome tutorial with video!!
Thanks for sharing,

Reply

CarenGio July 14, 2013 at 9:07 pm

Your tutorial was PERFECT and exactly what I was looking for!

I followed your instructions and the Facebook icon I selected is showing up on the menu bar. However, it is not open the Facebook page as is expected given: 1) the url is provided in the Custom Menu item and 2) the Link Target is selected in the Screen Options.

Any thoughts on what might be or not be happening?

Thanks for any help on this!
Caren

Reply

Eileen Lonergan July 15, 2013 at 3:15 am

Thank you Caren, sorry you are stuck. Lets try this, go into the menu where you have the Facebook URL, copy that and paste it into a fresh tab. We want to make sure that Facebook URL is copied correctly. If it opens to your page, then we know this isn’t the problem. (Sometimes the 100th check a day later yields interesting results). Next step, uncheck the option to open in a new page and see if that changes any results. If you do this and still no change lemme know.

Reply

CarenGio July 16, 2013 at 5:13 pm

Thanks for your reply!

I copied the URL to a fresh tab – no joy ๐Ÿ™
I unchecked the option to open in a new page – no joy ๐Ÿ™

I read through the WordPress support forum to see if anyone had reported this type of problem using Custom Links on menu items in the TwentyTwelve theme. Found nothing.

I have submitted my on topic as I am wondering if this isn’t a theme issue, but I would appreciate any other thoughts/ideas you have.

Reply

CarenGio July 17, 2013 at 8:45 pm

I wanted to let you, and anyone else, know that I was able to resolve my problem. It was suggested that I try targeting .menu-facebook a as opposed to .menu-facebook.

When I made this change in my child CSS code I am able to click on the FB icon and it opens the desired FB page! I am not even a novice so I have no idea why this worked but am super happy that it did!

Reply

Eileen Lonergan July 18, 2013 at 4:04 am

Caren, I am sorry I missed your previous email and I really appreciate you following up so other people can learn from your research. Can I clarify the code that worked was .menu-facebook a

Did you need to put the a into the style sheet as well?

Thanks for your input!

CarenGio July 18, 2013 at 8:57 am

Eileen,

The only change I made that was different from the instructions you provided was to the style.css file in my child theme. It now looks like:

.menu-facebook a {
text-indent: -9999px;
background-image: url(http://www.YourFileURL.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}

I did not have to make any changes to the Custom menu item; that was set up per your instructions.

I hope this helps to clarify what I did. Thanks again for all your assistance!
Caren

Reply

Penny Reeves August 24, 2013 at 11:14 pm

Thanks so much for this information Eileen. Your blogs are so useful, I really appreciate it.

Reply

David September 17, 2013 at 1:48 pm

Nice post! I tried to do this but again like some others i’m getting just the text.. Confused if it’s where I posted the CSS or what. If you know of a quick fix or a common issue please let me know. I did make sure like 5 times that I had the correct media link to a logo. I.E.
.menu-facebook a {
text-indent: -9999px;
background-image: url(http://www.music2rise.com/wp-content/uploads/2013/09/1379466521_twitter_square_black.png) !important;
background-repeat: no-repeat !important;
margin-left: -15px !important;
width: 30px;
}

Reply

Eileen Lonergan September 17, 2013 at 1:52 pm

Sorry this is giving your trouble – did you activate the custom CSS for your menu? At the top right of the screen click on Options, enable Link Target and CSS enable.

Reply

Mary September 29, 2013 at 3:07 pm

Hi Eileen,

I was sooooo happy when I found this post as it looked like exactly what I wanted to do. I followed everything step by step exactly (including enabling CSS and adding the css class) and I can get all the things onto my menu bar, but I don’t get the icons, just the text from the navigation label. The links work fine, it’s just really “wordy” without the icons.
Any suggestions for how I can get the icons to show?
Much thanks.

Reply

Eileen Lonergan September 29, 2013 at 3:58 pm

Ugh, it is such a bummer when things don’t work as expected. Let’s start here – can you check to make sure the wording is exact (ie menu-facebook, menu-twitter).

Reply

Yvonne Herbst September 30, 2013 at 5:56 am

I’m glad to see this and be reminded how to do it .. just wondering why you didn’t include the Facebook icon in your website menu too?

Reply

Alex October 17, 2013 at 11:49 am

I’ve put icons on a site on the right side of the nav bar. Which was fine after I figured out the css. But now if you roll over them in Chrome they flicker back and forth. Any solutions? Thanks in advance. http://www.trishapritikin.com

Reply

Eileen Lonergan October 17, 2013 at 5:24 pm

YES! Thanks to Mary of http://maryware.ca/ (fantastic jewelry designs) I have some options for you:

Try adding this to the bottom of your child theme style.css file:
#access li#menu-item-282:hover > a,
#access li#menu-item-283:hover > a,
#access li#menu-item-284:hover > a {
background: none repeat scroll 0 0 transparent;
}

Read this post on the forums: http://wordpress.org/support/topic/changing-hover-color-for-custom-menu-items-i-added?replies=5#post-4710423

Reply

Jennifer February 20, 2014 at 3:21 pm

Hi Eileen

Do you think this would this work on the nav bar in the Local Business Theme?

Best regards

Jen

Reply

Jennifer February 25, 2014 at 8:49 am

Hi Eileen

Is it possible to do this with the Wordpress Local Business Theme?

Best regards

Jen

Reply

selma April 5, 2014 at 12:21 pm

Thank you so much for this tutorial. when I saw that icon on my menu I was ecstatic, just with a little patience and a great teacher I got it done:)

Kind regards
Selma

Reply

Shelley April 28, 2014 at 2:37 pm

Hi Eileen – thank you for the tutorial! It worked perfectly! I have one question though. Is it possible to align the social icons in the nav bar to the right side while still keeping the other page tabs aligned on the left? I would love to see the social icons separate from the page choices but I’m not sure if that is doable or not.

Reply

esli May 19, 2014 at 8:55 am

Hi, thanks so much for this tutorial. everything went great, the icon appears without the text but the link is lost…which means that when you hover on it you cant press on it… any suggestions?

Reply

Paul Patrick Dale October 8, 2014 at 7:47 pm

Followed instructions to a t, but alas, in 3.9.2 there is no “custom” or “css classes optional” in the menu settings. Any workaround?

Reply

Leave a Comment

{ 8 trackbacks }

Previous post:

Next post: