There are a couple different ways, one would be image replacement for menu items. I would choose this option if the menu items are about the same size as the social media icons you'd like to use.
Another is to use absolute positioning to move the icons to a different spot on the page. Here is some CSS to get you started so you can see how it works:
#sidebar {
position: relative;
}
#text-3 {
position: absolute;
top: -15px;
left: -640px;
}
#content {
margin-top: 140px;
}
Your images are a bit large, so they don't all fit on one line. If you change out the images to be smaller and adjust the margin-top value, you can probably get them to fit better.
Here is an example of the image replacement technique:
#access #menu-item-165 a,
#access #menu-item-165:hover a {
background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) no-repeat;
display: block;
width: 32px;
height: 20px;
text-align: left;
text-indent: -9999px;
}
In both cases, you need to know the unique ID or class value for the element you are trying to change. In the example above, the contact menu value has an ID of "menu-item-165", so that's the menu item getting replaced by the image. You would need to add a custom menu item for each social media icon you's like, and then add one ruleset for each of them with the correct menu item ID value for the selector. You would also want to replace the url() value with your own image links.
Of the two examples above, you would want to pick one or the other.
Note that these examples are specific to the Fresh and Clean them, and the ID values are specific to the current menu and widget setup on the http://droptheloads.com/ site.
droptheloads
designsimply
