Want to add Social Media Icons to Menu

  • Unknown's avatar
    johnhighet · Member ·

    Is it possible to add social media icons (using the widget technique listed here:http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer or another way?) to be enclosed within the main navigation menu bar?

    Would like these to look like this example: http://d3jy36okyc9b4y.cloudfront.net/wp-content/uploads/2013/01/social_icon_heading.jpg (as opposed to within a sidebar).

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    lizthefair · Member ·

    It is possible, but it requires the Custom Design upgrade. Do you have that?

    If so, the first steps in the process are
    1) upload the images you want to use as the icons to your media library (each icon should be an individual file).

    2) Using the custom-menu “links” option, add your social media sites to your menu. For now, you’ll use the word “Facebook” to link to your Facebook page etc., we’ll replace the word with the image in the CSS.

    Your site is private, and as I volunteer I (rightly) don’t have access to the administrative settings of your site, so it will be easier for a Happiness Engineer to help you with the actual code.

    If you could confirm that you have (or are purchasing) the Custom Design upgrade, I’ll mark this thread for staff assistance and once you’ve followed steps 1 and 2 they will give you the code you need for Step 3.

  • Unknown's avatar
    designsimply · Member ·

    You can use an image replacement technique to replace menu item text with a small image instead. To do it, first you need to learn how to find the unique identifier for menu items in your blog. You can use built in browser tools to do that, here is a guide:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    In your current blog setup, you have a menu item named “Blog” and the unique identifier for that item is “menu-item-18” — using that, you can change the text into an image with the following example CSS:

    #menu-item-18 a {
	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) no-repeat;
	width: 32px;
	height: 32px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

    To use a different image, upload the social media icon you would like to use into the media library in your blog dashboard, copy the image URL, and replace it in the url() function in the example above.

    To apply the example to a different menu item, determine the item’s unique identifier and use it in place of “menu-item-18” in the example above.

    Repeat the same code for each menu item you would like to change into an icon.

  • The topic ‘Want to add Social Media Icons to Menu’ is closed to new replies.