Put social media icons in Menu Bar [Fresh and Clean]

  • Author
  • #1033759


    Good day,

    I have a general question: Is there any way to put social media icons into the menu bar with a wordpress.com hosted blog? Currently I can only get them in the page via a text widget and the coding inside of it but I cannot for the life of me figure out how I could get any sort of image / imagelink into the menu bar. If anybody knows how, I would greatly appricaite it to save precious content space. Thanks in advanced!

    Blog in question: http://droptheloads.com

    You’ll see the social media icons in the task bar and the light gray menu, I want to move those into the menu bar.

    The blog I need help with is droptheloads.com.


    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.


    hello! We are trying to do the same on our page http://sandinherpockets.com/
    can you help us please?

    it would be AMAZING if we had a box style menu with the icons in a 3 x 3 arrangement (we have more icons to add), can we do this? And how?

The topic ‘Put social media icons in Menu Bar [Fresh and Clean]’ is closed to new replies.