How to add social media icons in header

Put this in your style.php

div.social-icons
{
    position:fixed;
	top:15px;
	left:15px;
    width: 300px;
}

and this in your header.php

<div class="social-icons">
- your content here -
</div>

you can post both at the bottom of each pages and you can play around with the values of the top, left and width until it suits you.

Thank you robvdn!
Sorry though, I am very new at this, so you might need to be a little patient…
Do I use <div class=”social-icons”> instead of <div id=”header_icons”> I was using before? Because I tried using just that, and tried using both, and the result in both cases was that the icons no longer appeared in line but vertically, and they are behind the header (I know they’re there and vertical because I can click).
Could you please tell me what I did wrong?
Thank you in advance ??

How you call the CSS style is not important as long as you use the same, unique name in both CSS and header.

You can add a z-index to your CSS which stacks this code, a bit like paper pages. With a worth of 1 it will be at the bottom and with a worth of 100 there will be 99 pages beneath it. It depends on what z-index your header has, just experiment here.

div.social-icons
{
    position:fixed;
	top:15px;
	left:15px;
        width: 300px;
        z-index: 10;
}

Do you have a
or <p> between your icons? Otherwise try to make the width wider, say 600.

Do you have a <br> or <p> between your icons? If so remove them. Otherwise try to make the width wider, say 600.

Hello,

Thank you, I definitely get the look I want now! My only problem is that now, when I scroll down, the icons stay at the top of the screen, and I want them to remain in the header, so not be seen after I scroll down (I have social icons at the bottom of each article, and I don’t want it to be redundant).

I tried removing “position:fixed” but it gave me the pink bar again… any ideas?

Hi again,

Any ideas about how I can make the social icons not sticky? (so they go away when I scroll down, normally) I’m sure there’s a really easy CSS thing that I just cannot find ??

Thank you all in advance!

OK so never mind I fixed the issue myself. I just changed postion:fixed and wrote position:absolute instead, and that worked, in case anyone else was wondering the same thing ??

Cheers!