adding social media icons in menu bar of twenty eleven theme

  • Unknown's avatar
    mrtntllng · Member ·

    hi there,

    i’m new to this forum and to wordpress for that matter, so excuse me for newbie questions..

    i wish to add social media icons in the menu bar of my twenty eleven theme blog..

    been fiddling around with CSS this morning, without results.
    Can somebody help me get going with this?

    many thanks in advance,
    Martijn

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

  • ehtis · Staff ·

    Hi Martijn,

    Best way to do this would be to first add a custom menu and then custom links to the desired social networks. How to do that is detailed here.

    Once that is done, upload icons of these services like Facebook, Twitter to your Media Library and post their direct links (links ending with .jpg or .png etc.) here.

    We can then put these icons/images as the background of those links in the custom menu. This way, the layout and position remains uniform through all the screen sizes.

  • Unknown's avatar
    mrtntllng · Member ·

    hi Ehtis

    thanks for your response! I’ve made the custom menu item with a link to facebook…but where do I set the link to the icon image that is in my media library?

    thanks for your help, greatly appreciated!
    martijn

  • ehtis · Staff ·

    Hi again,

    I’m using a test image from my media library in the code below — you should replace its URL with the one from your media library:

    .menu #menu-item-716 {
    background: url("https://ehtis.files.wordpress.com/2015/09/facebook.png") no-repeat center;
    float: right;
}
#menu-item-716 a {
    opacity: 0;
}

    32×32 icon/image size should suffice. :)

  • Unknown's avatar
    mrtntllng · Member ·

    hi ehtis

    ok, step by step :-)

    i’ve managed to create a clickable area in the menubar now, with the link to facebook…

    but the icon doesn’t show..
    the url to the image in the library is correct..

    something else i’m doing wrong?

    thanks for your help,
    martijn

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, we just need to make a bit of an adjustment. In the background declaration where you have
    32px 40%
    change that to
    0 5px
    and then change the height from 32px to 35px.

  • Unknown's avatar
    mrtntllng · Member ·

    hi sacred path!

    thanks, i’ve changed the values like you suggested

    but still don’t see the full icon…

    sizes of the image in the media library are 35 * 37

    thanks
    martijn

  • Unknown's avatar
    thesacredpath · Member ·

    Martijn, I’m seeing the full Linkedin icon on your site, but it is linked to Facebook.

  • Unknown's avatar
    mrtntllng · Member ·

    no idea how that happened :-)
    in my preview of the changes that I made only a part of the image appeared…
    is there a possible delay in preview of css editing?

    thanks,
    martijn

  • Unknown's avatar
    thesacredpath · Member ·

    Martijn, once in a while, on some things, the preview does not match what you will see on your actual site. It could have been a delay, or it could have been a browser caching issue. The image in the menu was to a Linkedin image, where when I first looked at your menu, you had a Facebook image.

  • The topic ‘adding social media icons in menu bar of twenty eleven theme’ is closed to new replies.