Need help? Check out our Support site, then


How to place Social Media icons in the header bar

  1. Hi, I recently upgraded to the Traveler template. I want to put icon links to my facebook, twitter, instagram, and pintrest accounts in the header bar at the top of the page where they are readily visable to blog visitors. How do I do this?

    The blog I need help with is karenpavone.wordpress.com.

  2. my the website I need help with is farministasfeast.com

  3. Hi there,

    The best way to do this would be to add each of your social media links as Custom Links in your Custom Menu:

    http://en.support.wordpress.com/menus/#adding-custom-links

    Then, you can upload the icons you'd like to use for each service to your Media Library, and then use CSS to replace the menu items with the icons. For example:

    li.page_item.page-item-2442 {
    	font-size: 0;
    }
    
    li.page_item.page-item-2442> a::before {
    	content: url('link to your image here');
    	position: relative;
    }

    And so on for each menu item. Does that make sense? If you need help, go ahead and add your social media links to your menu as custom links, and upload the icons you want to use for them. I'll be happy to help you out.

  4. Hi Eurello,

    So I played around a bit and got my FB, Twitter, & Pinterest links to appear in the top header!! Thanks!! But I can't figure out how to put a "Follow this Blog" Button in the top header along with them. Can you give me a code I can use to insert this feature in the top header bar as well? @farministasfeast.com. I appreciate your help.

    ~ Karen Pavone

  5. Hi Karen,

    I don't believe you can, because the follow blog button performs an action -- it doesn't just link to another site. But what you can do is create a page with your Follow button on it using the shortcode: http://en.support.wordpress.com/blog-subscription-shortcode/

    Then, you can link to that page in your menu. :)

  6. More questions! I now have the social media links established in the header of my webpage. Is there any way to get the icons instead of using the words? For instance, the "bird" instead of "twitter"? etc.

  7. Hi there,

    Sure! You can upload the icons you'd like to use for each service to your Media Library, and then use CSS to replace the menu items with the icons. For example:

    li.page_item.page-item-2442 { font-size: 0; }

    li.page_item.page-item-2442> a::before { content: url('link to your image here'); position: relative; }

    And so on for each menu item. Does that make sense? If you need help, go ahead and add your social media links to your menu as custom links, and upload the icons you want to use for them. I'll be happy to help you out.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags