Ready to get started?Download WordPress


How to add social media buttons to the header. (5 posts)

  1. petergood
    Posted 11 months ago #

    I have got a problem, because I am trying to add social media buttons on my website. But every tutorial I follow, the buttons are always aligned to the left, and not to the right. You can see what I mean, by visiting PG-Technology.pl I want the buttons in the header, to be aligned to the right, and not to the left. You can look at my CSS and HTML code:

    header.php (inside the container section)

    <div id="header_icons">
    <a href="https://www.facebook.com/your_social_media_URL" target="_blank">
    <img alt="" src="http://url_of_facebook_icon" width="40px" /></a>
    <a href="http://www.linkedin.com/profile/your_social_media_URL" target="_blank">
    <img alt="" src="http://url_of_linkedin_icon" width="40px" /></a>
    <a href="http://your_website_feed_address/feed" target="_blank"><img alt="" src=”http://url_of_feed_icon" width="40px" /></a>


    #header_icons {
    position: absolute;
    margin-top: 5%;
    z-index: 1;
  2. Andrew
    Forum Moderator
    Posted 11 months ago #

    If that PG-Technology link is a link to your blog then please fix is, we need to see the issue you are experiencing.

    BTW if you're using absolute positioning you can scrap using "margin"s and use position properties instead (top, bottom, right, left).

  3. petergood
    Posted 11 months ago #

    Hi Andrew!
    Thanks for leaving a reply in my topic :) The site must be down in Your region, because I changed the dns servers, and it takes some time to get going :) But, I will give You a screen shot: http://scr.hu/1qbw/ufhnu
    You will notice, that the buttons, are above the logo, I want them to be next to the logo, on the right side ;) The method You posted above doesn`t work :(

    Thanks ;)

  4. Andrew
    Forum Moderator
    Posted 11 months ago #

    Your social icons are inside the header? If so, give your header a position of relative.

    Sorry, but I can't help from a screenshot.

  5. petergood
    Posted 11 months ago #

    Thanks for the tip ;)
    Sorry, but it still doesn`t work :( You can view my webpage at: http://pg-technology.veed.eu/ ;)

    Have you got any other ideas? :)


You must log in to post.

About this Topic