Add social media icons to your navigation bar

Adding social media icons to your blogs navigation bar is just like adding links, but instead of text we’ll be using images / icons. I’ve updated this post to be less specific so it can be tweaked and applied to any navigation.

1. Add a class to your current navigation

Go to Layout and click edit on the HTML/Javascript gadget that has your custom navigation. Add class="navleft" to the ul of your link navigation, like so

<ul class="navleft">

We’ll use the class later on to position the menu.

2. Add social icons to the navigation

Exactly where you place the social icons depends on how you’ve set up your navigation. If you used this tutorial for a standard navigation or this tutorial for a drop-down navigation, then add the following under </ul> but before </div>.

<ul id="cssnav" class="navright">
<li><a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<li><a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<li><a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<!-- ADD MORE ICONS HERE -->
</ul>

Notice we’ve also added a class to this UL. Fill in your information and the direct link to icon image. To add more icons or add a rollover/hover over effect check the full tutorial here.

3. Position Both Menus – Move links to the left, icons to the right

We can use floats to position the links on the left and the icons on the right. Floating an object basically “pushes” it to one side in order to allow other elements to wrap / flow around it. I’ll do a post on this in the future. We’ve added classes above to both UL tags (class="navleft" and class="navright") so we can apply the float to those. Go to Template > Edit HTML and find the following

]]></b:skin>

Add the following code above it

.navleft {float:left; width: 50%;} .navright {float:right; width: 50%;} .tabs-inner .widget ul {margin-right: 0px; margin-left: 0px;}

You can alter the width value if needed. The values for margin-right and margin-left removes the default Blogger margins which will cause our links to go off screen.

4. Add a Background

If your menus now look like two separate menus, you’ll need to add a background to the parent div that wraps around both of the UL tags.

For example if your code looks like the following

<div class="CLASSNAME">

<ul class="navleft"> ... </ul>
<ul class="navright"> ... </ul>

</div>

Use the class from the div, in this case CLASSNAME to add a background colour like this

.CLASSNAME {background: #000000;}

Change the value #000000 to match your navigation.

5. Adjust the space between icons

Your icons will have the same spacing as your text links due to the CSS, to override that you can use the following to reduce only the spacing between the icons

.navright li a {padding-left: 0; padding-right: 0; }

Adjust the number if you want to add padding.

Your template may be overriding the code. If this is the case and you don’t feel comfortable editing the original template code, you can add !important to the code above, like so

.navright li a {padding-left: 0 !important; padding-right: 0 !important; }

More in depth tutorial for each section

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

111 comments

  1. Angi on

    Hello! Thank you SO much for this tutorial, I have been searching high and low for instructions like this for a long time!

    I do have a question…I’m fairly certain I followed every step exactly as you wrote, but I’m having a hard time getting my social media icons to be IN the navigation bar. They’re fine, until I add the code to move the nav bar to the top of my page..then, the page links are in the nav bar, but the social media icons are underneath the bar. Still on the right side, but for the life of me, no matter which padding I adjust, they stay situated right underneath the bar. Any advice? 🙂 Thanks in advance!!

    Reply
      • Laura on

        I have the same problem 🙁 I keep going over everything but I just can’t understand what’s missing or what’s too much. I want the drop down menu to continue to be in the center and those three icons to be on the right, but in the same line as the nav bar. Help!

        Reply
        • Elaine M on

          Hey Laura, we use floats in the tutorial above to send one of the lists to the left and one of the lists to the right. A slightly different approach is needed if you want the links in the centre and icons on the right. You can use the above method but will have to tweak the margins and text-align values 🙂

          Reply
        • Elaine M on

          Make sure you are using the classes and that your CSS is being read correctly. I see you also have a search bar installed so you’ll have to include your icons in that div.

          Reply
    • ashley on

      Thanks so much for this tutorial, it was so helpful! I am having the exact same problem though, the icons are positioned directly below the navigation menu and I can’t for the life of me figure out how to get them inside! Help would be much appreciated!

      Reply
  2. Ruby on

    Hi Ellie,

    Thanks so much for this tutorial + tons of others you’ve helped me with!!!
    I need some help with this one though. How can I center the links and have the social media icons on the right. I also wanted to include a search box on the left… but I guess that would be another tutorial. Any help would be appreciated. Thanks!!

    Reply
  3. Trob on

    Hi Xomisse,

    First, thank you so much for your tutorials. They are extremely pedagogic.
    You’ve helped me a lot to better understand the mechanisms to manage my website.
    Second, I’m French so forgive my bad english.

    Using yours tutorials, I have created a navigation bar to my site, i’ve make it full width.
    I would like the #navigationbar to be able to stick to the top but just when I scroll down the page.
    I assume I had to use a Javascript but I’m a little lost to do it.

    I would like to achieve something like her navigation bar : http://www.leblogdebetty.com/

    Can you help me?

    Reply
  4. ivi on

    hi this is my last question just want to know how to change the background of the whole bar with icon et search bar i already tried but it only change the links!

    Reply
    • Ellie M on

      In step 8 change background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; position: relative; to background: #HEXVALUE; and insert the colour you want as a haxvalue. List of hex values here.

      Reply
  5. ivi on

    hi i just want to thank you for your tutorials they are amazing and my blog is fine now. i just have a problem with the space between title and date in the first post is something wrong? thank for all your replies.

    Reply
  6. Hannah on

    Hi Ellie! Thanks for this post, helpful as ever!
    I tried to do this and it seems to be working well except for one thing – my social media icons seem to be on a lower level than my links. I have tried everything I know but can’t fix it! Any help would be appreciated, thanks! 🙂

    http://www.pookybanana.com

    Reply
  7. Brooks on

    Thanks for the great tutorial! I’m having trouble decreasing the space between my social icons and my navbar links. What can I do to bring them closer together?

    Reply
  8. Aney on

    Hi – thank you for sharing this great tutorial! I wonder if you can help me solve an issue that I am running into. I can’t seem to get the navleft and right to float to the opposite sides. Instead, my social media icons are appearing right underneath the text. How do I separate them so that they’re on separate sides?

    Please help!

    Thank you so much,
    Aney

    Reply
    • Elaine Malone on

      Hello, you have some errors in the CSS section of your template. Find .navleft and close the bracket for the previous code which is above it. Remove the extra bracket above ]]> </b:skin> and check for other missing/extras characters.

      Reply
  9. Aney on

    Thanks Elaine! This is super helpful. How did you manage to make your nav bar centred to the page, but responsive as you made the window smaller? My pages/drop down menu and social media icons are appearing on opposite sides, but I would like them to line up with my post (similar to yours).

    Please help!

    Thank you,
    Aney

    Reply
    • Elaine M on

      Hello Aney, I’m self hosted so the coding is different but you need to set up a reponsive menu using media queries and adjust the margin, padding and width to line up with content.

      Reply
  10. Corley on

    You have helped me so much with these tutorials. I can’t thank you enough. My blog has never looked better. Although, I’m having an issue with the social icons on the nav bar. There is a white space between my nav bar links and the social icons, and I can’t seem to figure out how to adjust the height on the right side where the icons are. I hope that makes sense. Any suggestions?

    thanks – Corley

    Reply
    • Elaine M on

      Hello Corely, thank you. You can adjust the height of the bar using #navigationbar in step 8 or using .navright in step 7 if you just want to apply it to the icons. Double check that you’ve set a background colour for tabs in the Template Designer (Template > Customise > Advanced) as that might be what the white space is.

      Reply
  11. MAILE on

    Hi there!

    Thank you SO MUCH for all the wonderful tutorials! I’m building my blog from scratch and your blog has been an absolute God-send. I’ve installed the nav bar in both a test blog and in my real blog. It works perfectly in the tester (http://mailestesterblogthingie.blogspot.com/), but the links are showing below the tab border in the real blog (http://www.thebbpaperie.com/). I’m not sure what’s wrong, since I developed the test blog first and then uploaded the template to the real blog. I changed the links themselves, but made no changes to the code. Thanks for your help!

    Reply
    • Elaine M on

      Hello Maile, thank you! I’m really glad you’ve found my blog helpful, apologies for delayed response. Hmm, check the placement of the gadget in layout. The two gadget areas at the top are for the header section and tabs section, try moving the gadget up/down to swap the sections, it might just be in a different place than on your test blog. Hope this helps!

      Reply
  12. Ashley on

    HI!

    This tutorial works GREAT!
    However, how do you get your navbar to adjust when you make the window smaller? Mine seems to get distorted when I open up different web browsers.

    Thanks!

    Reply
  13. Molly on

    Hi! This is such a helpful tutorial!! I used to be well apt in HTML when I was younger but I’m a little (a lot) rusty and out of practice now, so this has been amazing!
    My only question is how to get the drop down menu to begin at the bottom of the main menu, if that makes sense? My main menu is a light blue and the drop down white, and unfortunately when I hover the drop down menu begins a few pixels above the bottom of the main menu, so it doesn’t look lovely and smooth.
    So how can I fix this? I’ve tried adjusting margins, menu height etc with no luck.
    Thanks!
    Molly x

    Reply
    • Elaine M on

      Hello Molly. Thank you so much 🙂 Add #cssnav li a {padding-bottom: 1.2em;} to your CSS, that should solve your problem. I’ve also recommend moving the ul with the id="cssnav" out of the ul with no id so that the code is <div id="navigationbar"> <ul id="cssnav" class="navleft"> ... </ul> <ul id="cssnavicons" class="navright"> ... </ul> </div> instead of having an unordered list wrapped within another list.

      Reply
  14. Amy Ramírez on

    Hi, These tutorials are so amazing and so easy to follow. I just have one small problem. I have followed all the instructions in steps 8 and 9 but the links buttons and the social icons don’t look connected. If I put a background colour on the navigation bar the colour appears on the left, links, and on the right, social icons, but there is a white space between. Also I can’t seem to reduce the space between the social icons, even after having added the code you give to the template. Can you help?
    Thank you in advance

    Reply
  15. katie on

    Awesome tutorial! Everything worked great! two questions: Just wondering what to do if I want a more centered look, as well as how to decrease the spacing thats between the links and social media buttons?

    Reply
  16. Janine on

    Hello 🙂

    Thank you for your awesome tutorials!

    Can I add social media icosn to my navigation bar when using “Pages” as a navigation bar in blogger?

    Thank you for your help!

    Reply
  17. Amy Ramírez on

    Hi, I posted a comment on 7 Feb. but I see it’s still awaiting moderation.

    Anyway, I have solved the second part of the query and I have managed to take out the spaces between the social buttons, but now both the social buttons on the right and the text links on the left are bunched up together. Is there any way to space them out a little? Thank you.

    Reply
    • Elaine M on

      Apologies Amy, there’s over 100 comments since the beginning of February and I can only manage to get through a couple every few days. You can adjust the padding between links. Are you using a test site that you can provide a link to so I can give you a more accurate answer?

      Reply
      • Amy Ramírez on

        Thanks so much for your answer. Yes, I am using a test site as I am trying out a few things to include in a new template. I want to totally re-design my blog and I will eventually be getting in touch with you for a new blogger template. I have the test site closed to readers so in order for you to see it I will have to include you as a reader or author. Which name should I use to include you. I appreciate your help. Thank you so much.

        Reply
          • Amy Ramírez on

            I have added you as an author Elaine. and the invitation has been sent. Please bear in mind that this is just a test blog. I will send you an e-mail with what I have in mind for the new design for my blog, asking your opinions and advice. Thank you so much in advance.

          • Elaine M on

            Hello Amy. You’re missing a closing bracket in your CSS between .tabs-inner .widget ul {margin-right: 0px; margin-left: 0px; and
            .tabs-inner .widget ul..., add that and your initial problems will be fixed. This prevents any CSS that is after it from working. Go to Layout > Edit Nav Gadget and remove the excess list items in the social media section. Then add .navright {padding: 0px 5px !important;} to your CSS. This will add a little bit of spacing between them.

    • janine on

      I guess the general problem I have is after adding all these codes before ]]> I don’t understand where I can change the background colour of the navigation bar and the background colour of the dropdown links and how I can get a line below the navigation bar. Sorry for all the question! You are just such a HUGE help 🙂

      Reply
      • Elaine M on

        You can make changes in the Template Designer (Template > Customise > Advanced > Tabs Background + Tabs Text) or by manually replacing the values in step 4 that look like $(....) with a specific value. Each area that you can change has a note beside it to explain what it is. For example, looking at color: $(tabs.text.color); /* Template Designer - Change Font Size */ under #cssnav, it says that it alters the font colour. We could manually change it to color: #000; to make the text black. I hope this answers your question?

        Reply
        • janine on

          I would like to do it manually. So do I just type in: “Font: neou”? Because doing that doesn’t change anything :L
          Also is it possible to get a line below my navigation bar?

          Reply
          • Elaine M on

            Hello, yeah the CSS would be font-family: fontname;, but since it’s a custom / third party font you need to install / embed it into your template first by following the tutorial here. To add a line under it just add border-bottom: 1px solid #000; to #navigationbar and change the hexvalue for the colour you want.

    • Elaine M on

      Hello, thank you. You have a white BG set but there’s an error which is preventing it from showing. Find #navigationbar in your CSS and in between the brackets find background: ##FFFFFF;, remove one of the # so it reads background: #FFFFFF; and save 🙂

      Reply
  18. kelsey on

    I used the navigation tutorial to add a navigation bar that sticks to the top and it worked great! Now I’ve gone through this tutorial a few times to get the social media icons. The social media icon do show up but my pages are in the dead center and my social media icons are in the center underneath them. I do have “navleft” and “navright” before each set of code. I am a beginner and don’t know too much about html. If you could help me that would be great!

    Thanks for the awesome tutorials!

    Reply
    • Elaine M on

      Hello Kelsey, if you have the classes in correctly then usually the problem is with the CSS. Make sure there’s no errors in your CSS that may be blocking the floats from being read correctly 🙂

      Reply
  19. Anna tselevich on

    Hi Elaine!
    Thanks for the tutorial! it works well, although my social media icons are below the navigation bar rather than aligned with the page links. Anyway you can take a look and help?! Thank you!
    xo
    Anna

    Reply
  20. Sofia Pêga on

    Hi Elaine! First of all, let me tell you how are tutorials have been so useful to me! However, I have a little problem. I want to make a dropdown menu, my ideia is to put the mouse on the “portfolio” and then it would appear all the categories (nature, photoshoots, etc). My problem is that my menu is the blogger pages widget and I cannot found a code like “Home
    CATEGORY 1

    CATEGORY 2
    ” or something similar on my html. Is there anything I can do to make my pages widget be a dropdown menu? THANKS A LOT

    Reply
  21. Jessica on

    Thanks for this tutorial! How can I make my left links and right icons come closer together so there is less space in between? I also have a search bar on the far right so I think that’s why i”m getting confused and haven’t been able to figure it out.

    Thanks! 🙂

    Reply
  22. sl on

    Hi Ellie,

    Thanks so much for the tutorial!

    I have succesfully added few social media icons on my blogger navigation bar, only problem is that they are placed straight under tabs (in another “row”) even though I copied the code for moving them to the right. What could have possibly gone wrong and how can I fix it?

    Thanks in advance!

    Reply
  23. Marcela on

    Looking at your blog has given me so much inspiration to create my own. Thank you so much for sharing your knowledge with us 🙂
    Regarding this tutorial, I am having a little bit of trouble making the social icons display inline. Could you please take a look at my blog?
    Thank you for you time.

    Reply
  24. Lauren on

    hello, I am having trouble knowing exactly where to paste the code for the social media icons. I don’t see a “ul”. I have everything else (the icon direct links and a sticky nav bar). I’m not too savvy with navigating around my html coding so I usually just use the “jump to widget” feature. Can you give me a little more direction or detail for where this should be pasted?

    Reply
    • Elaine M on

      Hello, it will depend on how you’ve created your custom navigation. In my navigation tutorials we use lists, so that is what the instructions for “under </ul>” is for. If you haven’t used lists, you can add the code the same way you’ve added links to your custom navigation in a gadget or the HTML section of your template.

      Reply
  25. Sol on

    Hello Ellie,

    First of all, thank you for all these tutorials and posts, it’s really useful for beginners. I have a problem with social media icons: they are underneath the navigation bar and I just can’t move them to the same bar’s line. I’ve been “playing” with the code in the gadget but it doesn’t work and it doesn’t seem I have errors in CSS (or perhaps yes?). I’ve invited you as an author. I hope you will be able to have a look at it. Thank you.

    Reply
    • Elaine M on

      Hello, remove float:none; from #nav ul and change text-align:right; on .navright to float:right;. Also make sure that the line <!-- end navmenu --> is written correctly as it’s showing as an error.

      Reply
      • Sol on

        Hello Ellie, thank you so much for your answer. It has worked beautifully. I’m so happy you can’t even imagine 🙂 I never would have thought of removing float: none; from #nav ul without your help.
        I would also like to ask how to reduce the spaces between social media icons. I was trying to add padding or margin to .navright but it didn’t work.
        I don’t know if this is the right topic to ask this question here but I was wondering if it was possible to add an image or styled text (it would be as a header) to the center of the navigation bar with the link to homepage, without being it a list item but only part of the list.
        Hope that makes sense.
        Thank you very much.

        Reply
        • Elaine M on

          Hello. No problem! You can reduce the padding on .navright li or .navright li a (depending on your template) or add a padding value to either of those selectors to overwrite original values. You can add text or an image by simply adding it in between the links and social media icons in the template.

          Reply
          • Sol on

            Hello, Ellie. Thank you for your answer. I’m using Simple template, but I have neither .navright li nor .navright li a and even if I add these selectors it does not help, which I don’t know if I’m doing right. What else could I do? I hope I’m not bothering you too much.

          • Sol on

            I’ve just invited you as an author. I also put an image on the navigation bar but the links go underneath and the image does not stay centered vertically. But I guess that’s another issue. Anyway the main thing that I want to figure out is about the social media icons. Thank you so much Ellie.

          • Elaine M on

            No problem, this will help with both of those issues .navright li a { padding: 0px 5px !important; } .navleft li {vertical-align: top;} 🙂

  26. Deap on

    Hello Ellie!
    I’ve been an avid fan of your blog as it really helps me on customizing mine. I have one question though, how can I align the nav bar with the social media icons? They are well placed, nav bar on the left and social icons on the right, but the social icons are beneath the nav bar. 🙁
    Thank you so much!

    Reply
  27. sajid on

    hey,
    thanks for this rare and awesome information
    but i have a problem, my social icons are not floating at right side completely please help

    Reply
    • Elaine M on

      Hello, make sure you are using the correct classes and that you have the correct CSS. See steps under “Move Links to the left, Icons to the right” again.

      Reply
  28. Lizzie on

    Hi
    I’ve learnt so much from you tutorials! Thank you.
    I’m just having a bit of trouble with this one, the icons appear on the line below the links. I saw other people were having this problem so i tried the things you suggested for them, but it hasn’t worked.
    I also tried to make the nav bar stay fixed at the top but that don’t seem to be responding either.
    Please can you help?
    Thanks

    Reply
    • Elaine M on

      Hello Lizzie. You’re using navright for both classes and don’t have the CSS to float them. See steps under “Move Links to the left, Icons to the right” again.

      Reply
  29. Helena chen on

    Hi there!

    I am trying to reduce the space between my social media icons, but .navright li a and .navright li dont seem to be working! Would you be able to help me with this?

    Thanks so much 🙂

    Reply
    • Elaine M on

      Hello, you’ll need to use the !important declaration to override other CSS in your template (.tabs-inner .widget li a), or remove that existing CSS. This should work .navright li a {padding: .6em 0em !important;}

      Reply
  30. Kate on

    Hi Ellie,

    Great tutorial, I’m having a bit of an issue with the social icons, I centered the drop down menu, and the social icons dropped below the drop down menu. I can’t seem to figure out how to get them in the same line while having the drop down menu centered. Would you please be able to help me with this?

    Thank you in advance 🙂

    Reply
    • Elaine M on

      Hello. The tutorial above is to send one of the lists to the left and one of the lists to the right. A slightly different approach / method is needed if you want the links in the centre and icons on the right. You can use the above method but will have to tweak the margins and text-align values.

      Reply
  31. Julie on

    Hi Ellie-
    I know several people have mentioned this in the comments that I’ve reviewed but I still can’t figure out my problem- I have my links & my icons aligned on the correct sides of the page as I’d like them to be but despite combing through I can’t figure out why my icons are a line below my links. I’m really quite dumb about coding & so I don’t know what to really look for but I’m trying to build my new site from scratch (both to learn & to be proud of later on!). Thankfully you have awesome tutorials that have been helping me out immensely. I think it’s safe to say that we all are so grateful for your help!!!!

    Thanks, Ellie!

    Reply
    • Elaine Malone on

      Hi Julie, thank you so much for the lovely comment. I’m so sorry about the delayed response, our site was offline for a few months but we’re back now and just getting through some comments. I see you’ve managed to align them correctly, is there anything else I can help with?

      Reply
  32. Ineke on

    First things first: YOU ROCK!
    Is there any way of reducing the space between the links and the social media buttons? I know you mentioned deleting the ‘float’ left and right but where do you mean? When I try to delete them in the .navleft etc. part it’s not doing anything…

    Reply
  33. Lauren C on

    Hi I don’t know if you still reply to comments on this but my page links on the left are higher up vertically than my social media icons that I got to be on the right. The social media icons caused the navigation bar to become wider. How do I vertically center just the page links on the left so they aren’t higher up than the icons?

    Reply
  34. Norina on

    Hey there,
    I really love your tutorials and they are always really helpful. My problem is that I can never find ]]> or anything similar in the HTML even by searching via Ctrl + F. Is there something I can do about it or do you know what I could have done wrong?
    Thank you so so much in advance,

    Norina | la-piccola-me.blogspot.com

    Reply
  35. Inês on

    Hi Ellie!

    I’ve trying this tutorial and instead of having my main menu on the left and social icons on the right I ended up with the mess you can currently see 🙁 I think its in the layout gadget part that I am messing it up… Can you try to help me please?

    Thank you in advance,
    Inês

    Reply
    • Elaine Malone on

      Hello 🙂 it’s a quick fix – move the social media icon UL list outside of the other UL list (so under the closing UL tag for the text navigation instead of above it). Also, there are some errors in your CSS which is preventing it from being read correctly, once they’re fixed it should be correct.

      Reply
      • Inês on

        Thank you so much for replying!

        I managed to move them to the right (however I have to keep them above the closing UL otherwise they stay on the right but under the menu bar…). So they are on the right now but very glued to the top/not centered in the bar.. How can I center them and maybe adjust the space between each icon?

        Once again,
        Thank you so much!

        Reply
        • Elaine Malone on

          Since your setup is a little different to the code above, the best way to achieve that is by adding #socialmedia a {line-height: 49px; padding: 0 5px; display: inline-block;} to your CSS.

          Reply