How To: Add Social Media Icons In Header

  • Resolved Crozon1

    (@crozon1)


    13 years, 5 months ago

    Hi all,

    I’m attempting to add social media icons in my header at http://www.crozon.ca, but am having problems with placement of the icons and also my sidebar moving.

    Placement: I would like the 5 social media icons to be aligned with my logo, spaced out evenly in the header.

    I’ve added the following to my header.php:

    <div id="header_icons">
<ul><li><a href="#" target="_blank" alt="Email"><img src="#" /></li>
<li><a href="#" target="_blank" alt="RSS"><img src="#" /></li>
<li><a href="#" target="_blank" alt="Twitter"><img src="#" /></li>
<li><a href="#" target="_blank" alt="LinkedIn"><img src="#" /></li>
<li><a href="#" target="_blank" alt="Facebook"><img src="#" /></li></ul>
</div>

    * – the # represents the actual link to the social media site and the path to the image

    The in order to have them line up horizontally I added the following code to my style.css:

    #header_icons li{
display:inline;
}

    The icons line up horizontally, however they are below the logo, which for some reason also moves the sidebar further down the page.

    I’ve tried a number of variations to try to get the icons to be aligned with the logo, but for the life of me cannot figure it out. Please help.

    Thanks in advance for the assistance.

    Ps – I’m very new with css / php, so if there is a better way to set this up please let me know.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Digital Raindrops

    (@adeptris)

    13 years, 5 months ago

    You need to look at the width of the .logo in the style.css and make room for the icons.

    This recent topic may help!

    HTH

    David

    Digital Raindrops

    (@adeptris)

    13 years, 5 months ago

    Juat had a quick look, try reducing the width of the header image, it is full width with lots of white space.

    #headerimg {
   position:relative;
   float:left;
   height:200px;
   margin:0;
   padding-left:23px;
   width:400px;
}

#header_icons{
   float: right;
   top: 50px;
   width:400px;
}

    Something like that!

    David

    Thread Starter Crozon1

    (@crozon1)

    13 years, 5 months ago

    Thanks David,

    But that really didn’t work. It’s giving me the same issues as I was having.

    1) The Sidebar keeps moving down the page
    2) I can’t get the icons to line up evenly spaced, horizontally, aligned with the logo, in the header.

    I added your code suggestion and left it up so you can see what is happening. I’m pretty sure the #header_icons, should include the following somewhere:

    #header_icons li{
display:inline;
}
    Digital Raindrops

    (@adeptris)

    13 years, 5 months ago

    The style is not in the style.css?

    #header_icons{
   float: right;
   margin-top: 100px;
   width:400px;
}

#header_icons li{
   float:right;
   margin: 5px 0px;
   display:inline;
}

    Thread Starter Crozon1

    (@crozon1)

    13 years, 5 months ago

    Thanks David,

    That’s a little closer. I’m still having a few problems though:

    1) Do you see how the sidebar keeps getting pushed down? It was inline with the content on the left before I added the icons to the header.php file. Am I doing something wrong in the header.phph?

    http://wordpress.pastebin.com/nS4Bjtrh

    2) The icons are at the top right of the screen, I would like them centred to the logo, is that just a case of playing around with the #headerimg width?

    Digital Raindrops

    (@adeptris)

    13 years, 5 months ago

    Adjust the margins to line them how you want, like above!

    Regards

    David

    Thread Starter Crozon1

    (@crozon1)

    13 years, 5 months ago

    Well thanks for trying David, I appreciate the effort.

    I’ll play around with the margins, but for now will just put everything back to where it was.

    If anyone else has any ideas on how to make this work, and help me figure out why the Sidebar keeps moving when I add icons to the header.php file it would be greatly appreciated.

    Thread Starter Crozon1

    (@crozon1)

    13 years, 5 months ago

    Ok – well I’m looking for an answer to why the Sidebar moves when icons are added to the header. I put the specific question here:

    http://wordpress.org/support/topic/why-does-my-sidebar-move-when-i-add-icons-to-the-header?replies=1

    sjcwebdesign

    (@sjcwebdesign)

    12 years, 11 months ago

    Hi Crozon1 – I know its been a while since your posts but I was able to add social media icons to the right of my header image using the 2010 theme. I took what you had done and added style tags for the UL, and LI To help others with the same problem I create a video tutorial. I just posted it on YouTube: http://www.youtube.com/watch?v=j9ihqEKHMHc. I hope it helps in some way.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How To: Add Social Media Icons In Header’ is closed to new replies.