Adding social media buttons to top of site

  • Author
  • #1730791

    Hello, I just got the custom design upgrade and want to add social media buttons to the top of my website. How do I do this?


    The blog I need help with is


    First, you should add the buttons. Here is a guide:

    Once the widget is in place, you can use absolute positioning to move it to another area on the page. Here is a really good article about absolute positioning:

    To illustrate how absolute positioning works with an example from your current site, here is some CSS that will move the “Donate” menu item from the left sidebar into the top right area of the header:

    #menu-item-31 > a {
    	border: 2px dashed red;
    	color: #000;
    	position: relative;
    	top: -260px;
    	left: 990px;
    #secondary {
    	z-index: 9;

    This is just an example for show, but you could use something similar to this to move social media buttons if you added them in a widget area.


    Thank you! I have now managed to create and link my social media icons :-). I’m still not getting how to position them and know nothing about CSS. I want to put them up on the left of the top menu – can anyone help with a CSS code to do that?


    I tried testing a solution similar to the example from before using the text widget you added to the footer area, but I couldn’t get it to work because of how the footer widgets are positioned by the theme.

    Positioning can be tough depending on the theme. In the Twenty Fourteen theme, I think you do need to add the icons to the primary sidebar widget area instead of the footer area before it will work. Can you try moving your social media icons to the primary sidebar as a next step? I will try again to help you with some CSS for positioning them after that.


    OK, great. They’re moved to the primary far so good….what’s next?


    Uh oh. The images are white with transparent backgrounds! That won’t work for your header area which also has a white background, but now that the widget is in the right spot, I can help you with a starting point for how to re-position it, and then you can take it from there.

    I would suggest the following steps at this point:

    1. Adjust the widget to use images that will show up on a white background such as your header background.

    2. Move the text widget to be first in the left sidebar (this is because the positioning is relative to that sidebar, so if it’s at the top then you shouldn’t have to re-adjust it in the future if you change/add menu items or other widgets in that same sidebar).

    3. Go to Appearance > Customize > CSS and add the following CSS to the editor as a starting point:

    #text-2 {
    	border: 2px dashed red;
    	color: #000;
    	position: relative;
    	top: -220px;
    	left: 990px;
    #secondary {
    	z-index: 9;

    The “-220px” number is a guess. You’ll need to adjust it after you update the order of the sidebar widgets.

    Remove the “border” rule before saving, it’s just there so it’s really easy to spot the widget while you’re working on moving it.


    Thank you! It looks great where it is at the moment. I’d really like to keep the white with transparent background icons if poss – I like the look and it took me AGES to find them!

    Only thing is that when the page is viewed in a different format eg mobile, the icons move. I guess this is something to do with the relative positioning? Is there a way to fix them where they are?


    This is actually quite a tricky request! I tested a whole bunch of things and couldn’t really find one solution that would work for all screens, but I did figure out a separate bit of CSS that will adjust mobile and tablet views only while leaving the previous update in place.

    What it does is anchor the text widget to the top of the main container in the HTML structure and moves it up just a little after that on small screens only — I couldn’t figure out how to do it the same way for desktop sized screens, but if you keep the last example from before and then try to add the following, it might just work. :)

    @media screen and (max-width: 1008px) {
    #main {
    	position: relative;
    #secondary {
    	position: static;
    #text-2 {
    	position: absolute;
    	top: -42px;
    	left: 0px;
    	width: 150px;
    	z-index: 9;

    It’s verrrrry tricky to work around all of the positioning rules already present in the Twenty Fourteen theme.


    Wow – you star – this seems to work brilliantly!! I really appreciate your help with this. Thank you :-)

    One more little detail I’ve just realised would be useful – how to make the page being linked to (twitter, FB etc) open in a new tab or window?


    To have the links in the text widget open in a new tab/window, you can add the


    attribute as show in the example below. Just open the text widget and edit the links for each and add it in.

    <a href="" target="_blank">
    <img title="Facebook" src="" alt="Facebook" width="35" height="35" />

    Thank you – that has worked a treat :-)


    You are welcome.

The topic ‘Adding social media buttons to top of site’ is closed to new replies.