Headway Themes — The Drag & Drop WordPress Theme

How to Put Social Media Icons in the Header for Headway 3.5.11?

Adding social media icons to your header is not difficult in Headway Themes with a little bit of CSS code. Using CSS code, you can position the social media icons anywhere you want to. In this example, we are going to utilize the space on the right side of the header to contain the social media icons.

how-to-add-social-media

  1. Log into your WordPress dashboard.
  2. Move your mouse over to the left panel and hover Headway.
  3. Click on Visual Editor and go to Grid mode.
  4. Draw a Widget Area block on top of the header block to contain the social media icons.
  5. Take note of the ID number of the Widget Area block as you will need to add in some content later.
  6. Once done, save it and move back to your WordPress dashboard.

Using Plugin – Social Media Widget for the Icons

We are not going to hard code and add in the social media icons individually but rather we need a more dynamic social media icon so that we can add in more social media icons easily in the future. Hence, we are going to utilize a WordPress plugin and the best plugin that fits this requirement is Social Media Widget from Blink Web Effects.

  1. At your WordPress dashboard, go to plugins and click Add New to install the Social Media Widget plugin.
  2. Once the plugin is installed and activated, move your mouse to Appearance at the left hand panel and click on Widgets.
  3. In the Widgets, look at the right hand side and look for the Widget Area that you have created in the Visual Editor previously.
  4. The Widget Area will show you the ID number so once you found it, drag the Social Media Widget from the Available Widget box into it.
  5. Click on the Social Media Widget, you can start entering the URL of your Twitter, RSS and YouTube. There are many options available so pick the social media you want and enter the correct URL.
  6. When you have finished, click save.
  7. Now, you can preview your blog/website in the browser, you will see the three icons appear.

Position the Social Media Icons

The next step is to position the three icons precisely as you wanted. In this example, we want to align them at the right hand side of the header and above the navigation bar.

  1. In your WordPress dashboard, click on Headway > Visual Editor > Design.
  2. When you are in the design mode, go to the top, click on Tools > Live CSS.
  3. Once the Live CSS box pops up, enter the following code:
    /*POSITION SOCIAL MEDIA ICON ON TOP OF THE HEADER*/
    #block-16 { position:absolute; top:25px;  }
    
    /*ALIGN SOCIAL MEDIA BUTTONS TO THE RIGHT*/
    #block-16 .socialmedia-buttons { margin-left:790px; margin-top:-10px!important;}
  4. Make sure you change the block ID number in the above code to your own block ID number.
  5. Click on the SAVE button at the top panel to save.
  6. You can now preview the result in your browser, the social media icons are aligned to the right hand side of the header.

If you want to change the setting of the social media icons for example its size, you can do it by going back to the Appearance > Widgets and click on the Social Media Widget. You can change the setting in the Icon Size under the General Setting. You can tweak the setting until you are happy with it.

4 Responses to How to Put Social Media Icons in the Header for Headway 3.5.11?

  1. Hi – I’m trying to do this now. I already have a header image loaded into my header block.
    What I don’t understand is how you said “Draw a Widget Area block on top of the header block to contain the social media icons”

    I don’t know how to DRAW a widget – or how you add it OVER the top of an existing block with an image??
    Could you explain this bit (in simple terms – I’m a novice!). Many thanks for a great post

    • OdeBlogger says:

      You will need one header block for your header image & another widget block for your social media icons. If you have a header block at the left hand side, shorten it a bit and drag and draw a widget block besides it. As a result, you will have two blocks sitting side by side. Hope this is clear.

  2. sdjg says:

    Everything worked fine but the widget block became extremely long. Whats the problem?

    • OdeBlogger says:

      Not sure how long is your “long”? Did you shorten your block or make your social media icon a little smaller?

Leave a reply