Adding social media icons to menu in suits theme

  • Unknown's avatar
    leanneralston · Member ·

    Hi, how do i add social media icons to my menu?? thanks leanne

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Leanne, to add social media links to your menu, the first step is to add them to the menu as custom links.

    The next step is to either view your source code (browser view menu) or use the web inspector built into your browser to identify the unique menu item IDs for those social links. They will be under a parent div that looks like this:

    <nav id="site-navigation" class="navigation main-navigation" role="navigation">

    You then look down through that section and find those menu items, which will look something like this where XX is the unique menu item ID:

    <li id="menu-item-XX" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-XX">

    You would then add the following CSS (with the correct number in place of XX) and insert your image URL where it says, URL_OF_IMAGE between the quote marks.

    #menu-item-XX a {
    background: url("URL_OF_IMAGE") no-repeat scroll left top / contain rgba(0, 0, 0, 0);
    display: block;
    text-indent: -9999px;
    margin-left: 20px;
}

    You would then do the same for any other social icons you wish to add to the menu.

  • Unknown's avatar
    lotmusicblog · Member ·

    Hi thesacredpath,

    I’ve been trying to do this, but I can’t get my custom link to work. I’ve added a custom link and called it “Facebook”, but somehow it’s not showing up in my menu..!
    Can you help me with this?

    The blog I need help with is http://www.lotmusicblog.wordpress.com

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @lotmusicblog, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum and I’ll watch for it and help you out. Many thanks in advance.

  • Unknown's avatar
    lotmusicblog · Member ·

    Hi @thesacredpath, thankyou for replying! I’ve figured it out by now. The custom link was somehow delayed and after a few hours it showed. Thanks to your reply to leanneralston I’ve now managed to get my icons in my header aswell, thanks a lot! :)

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome, and I don’t know of anything that would create that delay. If something like that happens again, try clearing your browser cache to see if perhaps your browser is pulling a cached page on your computer rather than getting the updated information from the WordPress servers.

  • The topic ‘Adding social media icons to menu in suits theme’ is closed to new replies.