WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Add social media icons to navigation bar (19 posts)

  1. sharongolod
    Member
    Posted 1 year ago #

    Can someone tell me how to add social media icons to the navigation bar...?

    Thank you,

    Shar

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Are they part of your theme? Or are you using a plugin to add them? That's probably the best way - you can then use CSS to determine where they show up.

  3. sharongolod
    Member
    Posted 1 year ago #

    I have the icons images and I was just wondering what the best way of adding them to the navigation bar would be... if I have to use a plugin I will but I'm not sure what to use right now.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You can likely use what you have, but you'll need to modify the header.php file - and for that, you need a child theme.

    http://codex.wordpress.org/Child_Themes

  5. sharongolod
    Member
    Posted 1 year ago #

    I have a CSS plugin but I just dont know how to add social media icons in the code for the header

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You can't do that using just CSS - you have to modify the code in the header.php file - and in order to do that, you have to use a child theme.

    OR find a plugin - maybe: http://wordpress.org/extend/plugins/floating-social-media-links/

    Or see if others will look like you want.

  7. sharongolod
    Member
    Posted 1 year ago #

    what if I was to modify the child theme? how would you write this in the code?

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Let us know when you have set up a Child Theme.

  9. sharongolod
    Member
    Posted 1 year ago #

    I'd like to add this to the Custom CSS, is that possible?

    How would you write it in coding?

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You can't do that using just CSS - you have to modify the code in the header.php file - and in order to do that, you have to use a child theme.

  11. sharongolod
    Member
    Posted 1 year ago #

    ok, so what would the code look like in the header.php? That's what I would like to know

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    You have the code for the social icons, you should be the one letting us know of it.

  13. sharongolod
    Member
    Posted 1 year ago #

    What I'm using for the coding is this:

    <a><img src="http://sharongolod.com/wp-content/uploads/2013/05/Facebook.png"></a>
  14. sharongolod
    Member
    Posted 1 year ago #

    I'm not sure why it's not displaying the <a href= and the link following but that's what I'm using. Does that help?

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try adding it just after the </hgroup> element.

  16. sharongolod
    Member
    Posted 1 year ago #

    It worked! One more thing, I don't mean to be a bug but I'm pretty new at this, where would you input this that I just did if I wanted it to be on the right side of the navigation bar instead of the left? http://www.sharongolod.com

    Thank you once again!

    Shar

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    You'd wrap your social icons in a <div> and then float it right.

  18. sharongolod
    Member
    Posted 1 year ago #

    Like this?

    <div>
    <a><img src="http://sharongolod.com/wp-content/uploads/2013/05/Facebook30.png"></a><a><img src="http://sharongolod.com/wp-content/uploads/2013/05/LinkedIn30.png"></a><a><img src="http://sharongolod.com/wp-content/uploads/2013/05/Google+30.png"></a>
    
    flot: right;
    
    </div>

    [In future remember to highlight your code and then press the "code" button before posting]

  19. Andrew
    Forum Moderator
    Posted 1 year ago #

    No, like this in your Child Theme header.php file (after the </hgroup> tag):

    <div class="social-icons">
     <a>
      <img src="http://sharongolod.com/wp-content/uploads/2013/05/Facebook30.png" />
      </a>
     <a>
      <img src="http://sharongolod.com/wp-content/uploads/2013/05/LinkedIn30.png" />
     </a>
     <a>
      <img src="http://sharongolod.com/wp-content/uploads/2013/05/Google+30.png" />
     </a>
    </div>

    And then this in your Child Theme style.css file:

    #masthead .social-icons {
     float: right;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.