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>

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


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>


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

Post last updated:

111 responses to “Add social media icons to your navigation bar”

  1. Angi

    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!!

    1. Hello, whats your URL so I can check the code? If it’s private can you invite **** in Permission Settings.

      1. 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!

        1. 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 🙂

      2. i have the exact same problem the social media icons are underneath the navigationbar how can i get them in the navigation bar?

        1. 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.

    2. 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!

    3. I have the same problem and can’t find what needs to be changed. Do you know what needs to be different? Thanks in advance!!


      1. Hey Sarah, apply a background to #navigationbar and remove it from .tabs-inner .widget ul. If you add the CSS from the navigation tutorials linked, it will clean up some of the other code.

  2. 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!!

    1. Adjust the alignment (using text-align and float) in step 7, to adjust the position of each of the elements. There’s a tutorial here for adding the search bar.

  3. Trob

    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 :

    Can you help me?

    1. Hello, you’ll find a tutorial for that here

      1. Trob

        Thank you so much 🙂

  4. 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!

    1. 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.

  5. 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.

    1. Hello. Your post is set to have a margin bottom value of 45px which is causing the space. See “Remove the Gap between Post title & Date” in this tutorial for help.

  6. Hannah

    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! 🙂

    1. Hey Hannah, how are you? In step 2 make sure to add class="navleft" to the ul tag of your links navigation 🙂

      1. Hannah

        Hi, I’m great, how are you?:D Awh you’re a genius, it’s fixed! Thanks a mil! By far the easiest tutorial for this online!

        1. I’m good 😀 no problem and thank you!

  7. 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?

    1. Reduce the padding values on your widget list links and navigation list.

  8. 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,

    1. 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.

  9. 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,

    1. 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.

  10. 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

    1. 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.

  11. MAILE

    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 (, but the links are showing below the tab border in the real blog ( 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!

    1. 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!

  12. 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.


    1. You have to customise it for different devices, I’ll have some posts on reponsive design soon.

  13. 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.
    Molly x

    1. 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.

  14. 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

    1. Thank you Amy. I’ve replied to your follow up Q.

  15. 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?

    1. Hey Katie, remove the float values in the CSS to stop one going to left and the other going to the right 🙂

  16. 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!

    1. Hey Janine. Thank you so much! Technically yes you can using images as the title, but it’s better to do so as shown above.

      1. Ok, but how can I incooperate pages (such as “about me”) into a navigation bar such as the one above?

        1. In step 2 you just add the URL of the page and the page title to the given code. The code shown is for a dropdown menu but there’s a link with the code for a standard menu too if that’s what you prefer.

          1. Sorry for all the questions! But how can I get the link to one of my blogger pages? Because it isn’t a website, just a page I created on blogger.

          2. If you go to Pages and click view page, you can copy the URL and use that as the link. It will be something like

  17. 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.

    1. 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?

      1. Amy Ramírez

        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.

        1. Can you add *******[at] as an author, and I’ll take a look for you.

          1. 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.

          2. 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.

  18. This tutorial is great, thank you! However now my Navigation menu is transparent, how can I make it white?

    1. 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 🙂

      1. 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?

        1. 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?

          1. 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.

    2. 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 🙂

  19. Hi Elaine,
    You are an absolute crack!!! Thank you so much for your reply, now there is a perfect space between the social buttons and the two sides are now connected. Perfect!!!

    1. No problem Amy! 🙂

  20. 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!

    1. 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 🙂

  21. 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!

    1. Hey Anna, make sure there’s no errors in your CSS that’s blocking the code for aligning the icons.

  22. 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

    1. Hi Sofia, thank you so much. No you have to create a custom navigation menu, you can’t add dropdown items to the pages gadget.

  23. Hi!! Is it possible to add social icons if using pages widget? Thanks!

    1. Hello. You can use images in place of the title, but it’s better to use a custom navigation instead.

  24. 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! 🙂

    1. Hello, you’ll need to remove the floats or add a left and right margin to the overall navigation

  25. 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!

    1. Hello, you’re missing both classes on the list itself in order to float them on either side 🙂

  26. 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.

  27. 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?

    1. 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.

  28. That was helpful! Thanks! 🙂

  29. Sol

    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.

    1. 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.

      1. Sol

        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.

        1. 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.

          1. Sol

            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.

          2. No at all 🙂 what is your URL and I will take a look for you?

          3. Sol

            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.

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

  30. Hi Ellie,
    I was just wondering if this tutorial applies if you made your navigation bar using the Pages gadget in Blogger?

    1. Hello, yes you can use this for the Pages gadget by adding it within the gadget loop in your template 🙂

  31. 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!

  32. 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

    1. sajid

      hey admin,
      i’m sorry but now problem has been solved
      thanks for this important post

  33. hey, i’ve used this tutorial but why are the social icons bellow the navbar? how can i fix it?

    1. 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.

  34. 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?

    1. 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.

  35. 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 🙂

    1. 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;}

  36. 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 🙂

    1. 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.

  37. 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!

    1. 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?

  38. 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…

  39. Lauren C

    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?

    1. Hey Lauren, I’ll need your URL to give you a specific answer but sounds like there’s a padding conflict. Check your CSS 🙂

  40. Is there any way to add these icons to my pages bar and have them spaced closely together?

    1. The above method will work for you, and reduce the padding to adjust the space between them.

  41. 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 |

    1. Hi Norina, have a look at this post where I explain the steps to finding code in your theme. Hope it helps!

  42. 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,

    1. 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.

      1. 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!

        1. 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.

  43. any drag and drop option could you share?

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.