Social Media Icons in my Header
-
Hello,
I would like to put social media icons in the lower right on my header. What is the CSS code I need to do this? I have the pilcrow theme. I have looked online but can’t find codes specifically for my theme. Thanks!The blog I need help with is: (visible only to logged in users)
-
Hi there, and with your theme, this is possible and should work well.
What you need to do is to get your icons, upload them to your media library and then put them into a text widget and link them to where you want them to go. Add that text widget at the top of your sidebar with no title and we can then help you move it up and into the header area. The following links will help with getting the images and links into a text widget.
-
Once you have the text widget in the sidebar, let us know and we can help you with the code.
-
Okay, text widget is in the sidebar with links. I put it at the top of the sidebar. I want to move the icons so that they are in the bottom right hand spot in my header in a line.
-
Hi there, before I work out the code, there are a couple of things I noticed about your site. You have set a static width for the sidebar, which with the flexible width design of Pilcrow makes the sidebar move down below the content at 800px in screen/window width. The sidebar originally had a width set as a percentage so that it narrowed with the content and always stayed on the right side of the content. If you narrow your browser window while looking at your site you will see what I mean.
Was this your intended behavior for your site? Let me know what you are trying to accomplish and we can go from there.
-
Yes, I see what you mean. How do I fix it so that the sidebar doesn’t go below the content?
-
And I will would like to move the social media icons to appear in the right hand corner of my header.
-
Ok, my first suggestion then is to change the width declaration from #sidebar in your custom CSS to the following
max-width: 29%;That will allow you to have your border around the sidebar and still keep the sidebar to the right of your content when the browser window is narrowed.
Now, on to the social icons. The following keeps the social icons in the header area down to a browser window width of 600px using Media Queries to adjust their position so they stay in the same relative position. Below 600px, the social icons start to obscure “Daughter” in your header image, so at that point they will revert back down and into the sidebar.
#content-box { position: relative; } #sidebar { overflow: visible; } @media screen and (min-width: 600px) { #text-8 { position: relative; top: -80px; width: 296px; } } @media screen and (max-width: 840px) { #text-8 { right: 10%; } } @media screen and (max-width: 770px) { #text-8 { right: 15% } } @media screen and (max-width: 710px) { #text-8 { right: 22%; } } @media screen and (max-width: 650px) { #text-8 { right: 30%; } } -
Thanks so much!!!! I have one more quick question. There is not a gap in the top of the sidebar where the social icons used to be. How can I get rid of the gap?
-
Hmmm, I used a different technique on your site because with position: relative the relocated widget kept its relationship to the sidebar, which keeps it relationship to the header image above so I only had to set the vertical location once. Add the following to the end of your custom CSS to tighten up the spacing at the top of your sidebar.
#text-8 { margin-bottom: 0; } #text-4 div { position: relative; top: -10px; } #wrapper .widget-title { margin-bottom: 10px; }The third rule in the code above gives a little white space between your widget titles and the content of the widgets. You can use it, edit the value or delete it if you do not want to make that change.
-
-
- The topic ‘Social Media Icons in my Header’ is closed to new replies.
WordPress.com Forums 