social icons beside or over header

  • Unknown's avatar
    julesbnotes · Member ·

    Hi there,
    I searched all forums and tutorials for 2 days to find a solution for this :/
    I would like to include my social icon buttons on the top right of my site, it can be over or beside the header. I have the customize upgrade and tried in the CSS editor without success. Is there a way to put the icons up? I have them in the sidebar now through text widget, that works, but would like to have them in the corner. I couldn’t find any tutorial or link for this.
    Thank you so much for your help :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    justpi · Member ·

    In my opinion, beside the header or in the corner would look very unbalanced. I would suggest above the header, centered. If you agree, add this: 

    @media screen and (min-width: 601px) {
.site-header {
margin-top: 123px;
}
#text-7 {
background-image: none;
left: 0;
position: absolute;
top: 100px;
width: 100%;
}
}

    Change the 100px to adjust the space above the icons, change the 123px to adjust the space below them.

  • Unknown's avatar
    julesbnotes · Member ·

    Thank you so much!! :-)
    I fixed it now and it looks great!! Thank you

  • Unknown's avatar
    justpi · Member ·

    You’re welcome, but no, you didn’t “fix it”, because you didn’t take into account the fact that the theme is responsive (it stretches and shrinks to adapt to different screen resolutions and devices).
    Here’s the result in a 1680px wide screen:
    http://wpbtips.files.wordpress.com/2014/01/jules1680icons.png
    And here’s the result in a 1024px wide screen:

  • Unknown's avatar
    julesbnotes · Member ·

    yes, I saw on my tablet. I understand now. Thank you for your help.
    I removed it for the moment, may I will change my theme anyway (thought of Expound) and will think of another solution for the icons.
    Thank you :)

  • Unknown's avatar
    justpi · Member ·

    You’re welcome.
    My previous reply didn’t mean that what you’re looking for is impossible, it meant you can’t do it that way. If you want the icons at the top left corner, try this instead of my previous suggestion: 

    @media screen and (min-width: 681px) {
.site {
position: relative;
}
#text-7 {
background-image: none;
padding: 0;
position: absolute;
right: 3%;
text-align: right;
top: 66px;
width: 100%;
}
#text-7 img {
width: 4%;
}
}
  • Unknown's avatar
    julesbnotes · Member ·

    Thanks for your answer and patience with me ;)
    I tried it like that. Now it is in the middle and on the header.

  • Unknown's avatar
    justpi · Member ·

    Ah yes, sorry! I forgot to add that you need to remove this from the widget code:
    style="text-align:center;"

  • Unknown's avatar
    julesbnotes · Member ·

    Thank you!! It worked now :)

  • Unknown's avatar
    julesbnotes · Member ·

    Hi, it’s me again ;)
    May you could help me one more time. I sat the last night to change my theme. I use now Expound for my blog, it is more clear, hope the readers will like it too.

    Is it also possible to put the social icons on the top right above the header? When I put the last CSS in the theme they are show up on the left side (vertically) and I cannot click my menu anymore…
    Thank you for help.

  • Unknown's avatar
    justpi · Member ·

    As before, I don’t agree – but it’s your blog, not mine!
    Try this: 

    #text-7 img {
display: inline-block;
width: 32px;
margin: 0;
}
@media screen and (min-width: 300px) {
#page {
position: relative;
}
#masthead {
margin-top: 66px;
}
#text-7 {
position: absolute;
right: 0;
top: 0;
margin-right: 20px;
}
}
  • Unknown's avatar
    julesbnotes · Member ·

    Thank you so much for your help :) It worked.
    I think it looks great now. Thank you.

  • Unknown's avatar
    justpi · Member ·

    You’re welcome!

  • The topic ‘social icons beside or over header’ is closed to new replies.