Move Social Media Icons To Navigation Bar

Hey.

You need to make your header relative:

#header {
position: relative;
}

Delete the original CSS you added to your child theme’s style.css for #social-media-icons. You’re right in that it was hiding your social icons. Add the following in its place:

#social-media-icons {
position: absolute;
bottom: 3%;
right: 10%;
}

You can change the value for bottom and right as you wish in order to change the position of your icons.

We also need to change the background-position of the images for your social media icons. Add the following to do this:

a.social-media-icon {
background-position: 0 -32px;
}

Let me know if this works for you.

Wow that worked like a charm, thank you so much Siobhan!

I’m not sure if this is considered a new topic or not, but do you know if it’s possible to add an additional social media icon that is not listed under the Pinboard Theme Options? I’d like to add a link to my Instagram page but it’s not listed as a pre-installed option.

Glad it worked. ??

It is possible to add another social media option, but you would first have to create an Instragram icon in a similar style to the other social media icons that are a part of this theme. I understand, this would probably be a little tricky. You’re best bet may be to leave a review and request this feature from the theme’s developer.

I actually just created an icon for instagram and saved it under my images folder, where the other social media icons are stored. Any chance you could point me in the right direction for adding this to my nav bar as well?

I’m a bit confused as to where I’d place the php. I already have a child theme and have been adding things to the style.css file, but I’m unsure of where to place the php.

I figured it out! I’m not sure if this is the best way to do it, but it was effective for me. I went into my wordpress dashboard and clicked appearance/theme options, and scrolled down to “social media options.” I entered my link to Instagram, but I placed it under the “youtube” link header (because I don’t have a youtube channel, I wasn’t using that link). I uploaded the Instagram icon into wp-content/themes/pinboard/images and named it “youtube.png”.

I know that this will wipe out after my next theme update, but it’s a quick fix that worked for me.

Hey. This is probably the best course of action for now, as the process of adding an extra social media option via a child theme quite tricky. Hopefully, after a theme update, you would only need to switch the youtube.png image back to your instagram image.

Okay sounds good, thanks Siobhan.