Add social icons to menu

  • Unknown's avatar
    craftbeercompass · Member ·

    Hi! I purchased the CSS customization upgrade today and can’t figure out how/what to enter to get some social media icons added to my menu bar. I’d like it to look like this site’s menu bar: http://wpmag.ru.

    My site is craftbeercompass.com.

    I’m grateful for any insight you can lend!

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

  • Unknown's avatar
    designsimply · Member ·

    Apologies for the delay in reply!

    In order to add social media icons to the menu like the ones at http://wpmag.ru/ you would first need to create or save the images you want to use to your blog’s media library:
    http://en.support.wordpress.com/images/#upload-images-from-your-computer

    Then, since you want to add the icons to your menu bar, I’d suggest adding one custom menu item for each icon you want to add and then using an image replacement technique in CSS to swap out the text for the icon image.

    Here’s a basic example you can start with:

    .navigation-main .menu-item-354 {
	float: right;
}
.navigation-main .menu-item-354 a {
	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) no-repeat;
	width: 32px;
	text-align: left;
	text-indent: -9999px;
}

    It takes the “About” menu item and replaces the text with a WordPress logo. You would need to write a separate block of CSS like this for each menu element you want to modify. To find the specific class code for each menu item (such as “menu-item-354”), you need to add the link as text first through the Appearance > Menus page and then view the site, right click the new menu element, and select “Inspect Element” ‘to see the HTML so you can find the class name to use for each separate link you add.

    Give it a try using the example above. If you still need help after that, reply back with the CSS you tried including the icon URL and have the menu link already in place on the site.

  • Unknown's avatar
    designsimply · Member ·

    You might also like:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  • The topic ‘Add social icons to menu’ is closed to new replies.