WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] Move Social Media Icons To Navigation Bar (8 posts)

  1. davebuilder
    Member
    Posted 10 months ago #

    Hi there,
    I'm trying to figure out how to move my social media icons into my navigation bar. The main issue (besides not knowing how to do this) is that I recently modified my Pinboard theme so that my header would fill the entire header (I believe this is the "div=wrapper").

    I searched on the boards and found the following code to do this (after creating a child theme):
    `#wrapper {
    position:relative;
    max-width:1140px;
    margin:0 auto;
    box-shadow:0 0 18px rgba(0, 0, 0, .4);
    background:url("http://www.davidharel.com/wp-content/uploads/2013/09/wood-landscape.jpg") repeat left top !important;}

    #social-media-icons {
    display: none;
    float: none;
    margin-top: 0;
    }

    #site-description {
    display: none;
    margin: 0;
    font-weight: 300;
    float: left;
    line-height: 0;
    }

    #header #searchform {
    display: none;
    float: none;
    }

    #site-title img {
    margin: 0;
    padding: 0;
    float: left;
    line-height: 0;
    }
    #site-title {
    margin: 0;
    margin-right: 0;
    line-height: 0;
    float: left;
    }
    #sidebar-header {
    display: none;
    }
    #sidebar-header {
    float: none;
    width: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    }
    #header-image {
    display: block;
    max-width: 100%;
    }
    `

    This worked for my header, but part of this css change was to remove the social media icons alltogether. I would be extremely grateful if anyone could show me how to add my social media icons back, and into my navigation bar (nav id="access").

    Here's my site: http://www.themakeupguy.com

  2. Siobhan Bamber (siobhyb)
    Forum Mod.
    Posted 10 months ago #

    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.

  3. davebuilder
    Member
    Posted 10 months ago #

    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.

  4. Siobhan Bamber (siobhyb)
    Forum Mod.
    Posted 10 months ago #

    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.

  5. davebuilder
    Member
    Posted 10 months ago #

    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.

  6. davebuilder
    Member
    Posted 10 months ago #

    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.

  7. Siobhan Bamber (siobhyb)
    Forum Mod.
    Posted 10 months ago #

    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.

  8. davebuilder
    Member
    Posted 10 months ago #

    Okay sounds good, thanks Siobhan.

Reply

You must log in to post.

About this Theme

About this Topic